javascript - 使用 getDerivedStateFromProps (React) 时出现错误：无法读取 null 的属性“setState”

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 未捕获的类型错误：无法在 getDerivedStateFromProps (main.js:30) 处读取 null 的属性“setState”

我在这里想念什么？

Answer 1

因为getDerivedStateFromProps是static函数，所以没有实例（this）。

相反，此函数旨在让您返回您的状态，而不是使用this.setState.

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

Answer 2

除了已经指出的错误（您需要返回状态）之外，您的实现存在错误并且无法正常工作。

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

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

要更深入地了解为什么这种模式被破坏，以及一些简单的替代方案，请查看React 官方博客文章避免派生状态。

Answer 3

您在静态方法的上下文中使用它。静态不依赖于类的实例，所以 this 不一样。最好的办法是在非静态方法中返回模态，然后从那里设置它：D

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)
    }
  }