当使用getDerivedStateFromProps（React）获取错误时：无法读取属性＆＃39; setState＆＃39;为null

Question

所以我刚刚得知componentWillReceiveProps已被弃用，我们现在需要使用getDerivedStateFromProps生命周期方法。 https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

我在下面使用它：

class Main extends Component {
  static getDerivedStateFromProps(props) {
    console.log('getDerivedStateFromProps', props);
    const { modal } = props;
    this.setState({ modal });
  }

  constructor(props) {
    super(props);

    this.state = {
      modal: {}
    };
  }

然而，它在setState

上出错了

  

main.js：30 Uncaught TypeError：无法读取属性＆＃39; setState＆＃39;为null       在getDerivedStateFromProps（main.js：30）

我在这里缺少什么？

Answer 1

由于getDerivedStateFromProps是static函数，因此没有实例（this）。

相反，此功能旨在让您返回状态而不是使用this.setState。

static getDerivedStateFromProps(props) {
    console.log('getDerivedStateFromProps', props);
    const { modal } = props;
    return { modal };
  }

Answer 2

除了已经指出的错误（你需要返回状态），你的实现是错误的，无法正常工作。

您正试图将道具“同步”到本地州。这是个坏主意，因为任何不相关的父组件重新渲染都会破坏本地状态。

看起来您应该完全删除getDerivedStateFromProps，并直接使用道具。在这个例子中你根本不需要本地状态。

要更深入地了解为什么这种模式被破坏，以及一些简单的替代方案，请查看the official React blog post on avoiding deriving state 。

Answer 3

您在静态方法的上下文中使用它。静态不依赖于类的实例，因此它不相同。您最好的选择是以非静态方法返回模态，然后从那里设置它：D

＆＃13;

＆＃13;

class Main extends Component {
  static getDerivedStateFromProps(props) {
    console.log('getDerivedStateFromProps', props);
    const { modal } = props;
    return modal;
  }

  constructor(props) {
    super(props);

    this.state = {
      modal: {}
    };
    
    SetModalState(modal)
    {
      this.setState(modal)
    }
  }

＆＃13;

＆＃13;

＆＃13;