每次我在React中处理内部组件状态时,都必须先为state属性定义一个空对象,否则我会在抛出this.state is undefined时遇到运行时错误

如果我要这样做:

render() {
  const { someProperty } = this.state;

  render <div>{someProperty}</div>
}

我会出错。

但是治愈方法很简单:
constructor(props) {
  super(props);

  this.state = {};
}

但是,对于我创建的每个组件,一遍又一遍地执行此操作非常烦人。

是否可以以某种方式强制将全局初始状态添加为空对象,从而避免所有用于定义空状态的样板?

P.s. (也许是修辞性的问题)为什么不能在同一个React核心中完成此操作?

最佳答案



您可以从实现此方法的React.Component扩展您自己的»component base class«,然后从该类派生所有组件。

import { React } from 'react';

class StatefulComponent extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = {};
    }
}

export default StatefulComponent;


class MyComponent extends StatefulComponent {
    render() {
        const { something } = this.state;
        return (<div>Hello, {something}</div>);
    }
}

(Live Demo)

通常不鼓励在React中扩展组件,因为它不是惯用的。在需要状态的(每个)组件中添加this.state = {}确实没有什么害处。但是,如果您要走那条路,就可以做到。



由于许多(或大多数)组件不需要状态,因此您将分配浪费的内存。这已经在react#1851中进行了讨论:

关于reactjs - 是否可以在React中将初始状态设置为空对象?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45456064/

10-12 12:25
查看更多