Question

我有一个父组件，该组件在 componentDidMount（）挂钩中获取数据。该数据的状态为 setState（） -d。然后，我将数据作为道具传递给子组件，并根据这些道具设置它们的状态。在第一个渲染中，道具尚未定义，因为 componentDidMount（）尚未执行。因此，子组件获得未定义的道具，并使用它们创建状态。当在 componentDidMount（）中获取数据时，新的道具将传递到子组件，但是状态已使用未定义的道具创建，并且没有任何变化。因此，我现在知道两种解决方案：

使用 componentWillRecieveProps（）。但这已被弃用。



使用无状态子组件。将数据作为道具传递给他们   父组件并且不设置状态（使用props中的数据），   当父级在 componentDidMount（）中执行 setState（）时，   将导致使用新道具重新渲染子组件，并且   一切正常。

现在，如果我想拥有有状态的子组件怎么办？我不能使用第二种方法，而第一种方法已被弃用。最好的解决方案是什么？

Answer 1

您可以阅读this blog post。简而言之，一种更好的方法是使用完全不受控制的组件和密钥。

根据数据向子组件添加一个键。如果数据更改，则密钥也会更改，子组件将重新安装。
将数据作为道具提供给子组件，将此道具用作子组件的默认状态。

这里是sandbox example

Answer 2

static getDerivedStateFromProps(props, state)

在初始安装和后续更新中，都在调用render方法之前立即调用

。它应该返回一个对象以更新状态，或者返回null则不更新任何内容。此方法适用于状态依赖于道具随时间变化的罕见用例。

  static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.someValue!==prevState.someValue){
     return { someState: nextProps.someValue};
   }
    else return null;
  }

有关更多详细信息，enter link description here

Answer 3

如果组件中的状态由接收到的道具的值告知，请考虑使用componentDidReceiveProps，getDerivedStateFromProps的替换。

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

在React中根据道具更改重新渲染子组件的最佳解决方案是什么？

3 个答案: