Javascript 使用getDerivedStateFromProps时（React）获取错误：无法读取属性'；设置状态'；空的

所以刚刚了解到，

componentWillReceiveProps

已被弃用，我们现在需要使用

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: {}
    };
  }

但是，它在设置状态时出错

main.js:30未捕获的TypeError:无法读取null的属性“setState” 在getDerivedStateFromProps（main.js:30）

---

我在这里缺少什么？

因为

getDerivedStateFromProps

是一个

静态

函数，所以没有实例（

this

）

相反，此函数的设计目的是让您返回状态，而不是使用

this.setState

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

---

由于

getDerivedStateFromProps

是一个

静态

函数，因此没有实例（

this

）

相反，此函数的设计目的是让您返回状态，而不是使用

this.setState

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

---

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

类主扩展组件{
静态getDerivedStateFromProps（props）{
log（'getDerivedStateFromProps'，props）；
const{modal}=props；
返回模式；
}
建造师（道具）{
超级（道具）；
此.state={
模态：{}
};
SetModalState（模态）
{
此.setState（模式）
}
}

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

类主扩展组件{
静态getDerivedStateFromProps（props）{
log（'getDerivedStateFromProps'，props）；
const{modal}=props；
返回模式；
}
建造师（道具）{
超级（道具）；
此.state={
模态：{}
};
SetModalState（模态）
{
此.setState（模式）
}
}

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

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

看起来您应该完全从props中删除

getDerivedStateFromProps

，直接使用props即可。在本例中，您根本不需要本地状态

---

要更深入地了解此模式被破坏的原因，以及一些简单的替代方案，请查看

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

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

看起来您应该完全从props中删除

getDerivedStateFromProps

，直接使用props即可。在本例中，您根本不需要本地状态

---

要更深入地了解此模式被破坏的原因，以及一些简单的替代方法，请查看

您可能可以使用

componentWillMount

检查是否存在模态道具。如果存在，请在其安装之前设置状态。Rusty on react，但我知道使用

componentDidMount

将抛出一个inf初始化循环。你可以使用

componentWillMount

来检查是否有模态道具。如果有，在模态道具安装之前设置状态。react上生锈，但我知道使用

componentDidMount

将抛出无限循环。谢谢！就是这样，好吧，新的错误…出于某种原因，我的Redux操作/还原程序没有强制执行此操作w方法启动。稍后可能会发布一个新问题。因此，如何在

static getDerivedStateFromProps（）

中访问

此

？我认为重要的是要注意这样的实现是不必要的。请参阅以了解更多详细信息。（我正在处理React。）谢谢！是的，就是这样，好吧，新的bug…出于某种原因，我的Redux操作/还原程序没有强制启动这个新方法。稍后可能会发布一个关于这个的新问题。那么，我如何在

静态getDerivedStateFromProps（）中访问
这个

？我认为重要的是要注意这样的实现是不必要的。有关更多详细信息，请参阅。（我处理React。）谢谢你的回复Dan！我很荣幸：D，好的，是的，我刚从我的应用程序中删除了它，是的，所有的东西都是从这个

开始工作的。道具
所以我想
getDerivedStateFromProps
的用例是一些罕见的边缘情况吗？是的，当你的状态取决于道具的变化时，这是罕见的情况。例如，
IsCrollingDown可能取决于
scrollPosition
中的更改。谢谢你的回复，Dan！我很荣幸：D和ok是的，我刚从我的应用程序中删除了它，是的，一切都是从
中运行的。道具
所以我猜
getDerivedStateFromProps
的用例是一些罕见的边缘情况吗？是的，这是针对罕见的情况，当你的状态取决于例如，
isScrollingDown
可能取决于
scrollPosition
中的更改。