不能将状态值用作子组件的道具

Question

在我的react js应用程序中，我似乎无法使用状态值作为子组件的道具。

在父组件constructor中，应用程序具有名为selectedWarehouseID的空状态。

此状态（selectedWarehouseID）应使用componentWillMount()方法中的某些信息进行更新。

现在，在父组件的render方法中，我嵌入了另一个具有此状态的子组件作为道具。

<ItemChooser
  productsByWarehouse = { this.state.selectedWarehouseID }
/>

现在问题是，在子组件中，this.props.productsByWarehouse的值始终为null。我找到了一个很好的explanation为什么会发生这种情况，但是如何等待父类componentWillMount()中更新的数据来访问子组件道具中传递的状态的更新值？

Answer 1

可能的解决方案是：

1。您将props值存储在子组件的state中，因此，只要props值发生任何更改，就更新子组件的状态（父母的状况）。对于那个使用componentWillReceiveProps生命周期方法。

<强> componentWillReceiveProps():

  在安装的组件接收新道具之前调用

。如果你需要   更新状态以响应prop更改（例如，重置   你可以比较this.props和nextProps并执行状态   在此方法中使用this.setState（）进行转换。

像这样：

componentWillReceiveProps(newProps){
   this.setState({
      value: newProps.productsByWarehouse
   });
}

注意：将值替换为存储值的实际键。

2。不要将props值存储在子组件的状态中，直接使用this.props.productsByWarehouse，每当您更改父状态值时，子将自动获取props中的更新值。