不能使用状态值作为子组件的props

IT技术 javascript reactjs react-jsx
2021-05-06 01:21:35

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

在父组件 中,constructor应用程序有一个名为 的空状态selectedWarehouseID

这个 state( selectedWarehouseID) 应该用componentWillMount()方法中的一些信息更新

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

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

现在问题来了,在子组件中, 的值this.props.productsByWarehouse总是null我找到了一个很好的解释为什么会发生这种情况,但是如何等待父组件中更新的数据componentWillMount()访问子组件 props 中传递的状态的更新值?

1个回答

可能的解决方案是:

1.您将props存储state子组件中,因此,只要props值(父级的状态)发生任何变化,就更新子组件的状态。为此,请使用componentWillReceiveProps生命周期方法。

componentWillReceiveProps():

在安装的组件接收新的 props 之前调用。如果您需要更新状态以响应 prop 更改(例如,重置它),您可以比较 this.props 和 nextProps 并在此方法中使用 this.setState() 执行状态转换。

像这样:

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

注意:用存储值的实际键替换值。

2.props子组件的state中不要存储值,直接使用this.props.productsByWarehouse,每当你改变父状态的值时,child会自动获取更新后的值props