Question

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

如果我要这样做：

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

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

我会收到错误。

但治愈很简单：

constructor(props) {
  super(props);

  this.state = {};
}

然而，对于我创建的每个组件反复执行此操作非常烦人。

是否有可能强制反应将初始状态添加为全局空对象，以避免所有样板用于空状态定义？

P.S。（也许是修辞问题）为什么不在同一个React核心中完成这个？

Answer 1

是否有可能强制反应将初始状态添加为全局空对象，以避免所有样板用于空状态定义？

您可以创建自己的»组件基类«，从React.Component扩展，实现此目的，然后从此类派生所有组件。

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 = {}确实没有坏处。但是如果你想走这条路，就可以做到。

P.S。（也许是修辞问题）为什么不在同一个React核心中完成这个？

因为许多（或大多数）组件不需要状态，因此您将分配浪费的内存。这已在react#1851中讨论过：

syranide：对于不需要状态的组件（可能很容易占多数），避免分配是一种胜利。

Answer 2

解构非对象，数组或可迭代的值

当您尝试在null或undefined上使用destructuring时，会出现类型错误：

var {data} = null;
// TypeError: null has no properties

var {property} = this.state
// TypeError: state is not defined

所以你可以改为

   const { someProperty } = this.state || {};

然而，从一次开始就定义一个初始状态更好。

是否可以在React中创建初始状态空对象？

2 个答案: