Question

我在子组件中传递状态作为道具，但是孩子正在将之前的道具更新为其状态。

例如：

我正在传递 state = a ，然后状态更新为 state = b 。孩子会将其更新为 a 。

父：

<div className="custom-container">
    {console.log("Passing Tab:"+this.state.selectedTab)}
    <Companyprofilehead data={companyData} selfprofile={false} tab={this.state.selectedTab}/>
</div>

在上面的代码中，console.log将提供输出：

Passing Tab: b

在Child的componentWillMount（）中：

componentWillMount(){
    var currentTab = this.props.tab;
    console.log("CURRENT TAB:"+currentTab);
    this.setState({
      currentTab: currentTab
    })
}

孩子的 componentWillReceiveProps（）：

componentWillReceiveProps(newProps) {
 var currentTab = this.props.tab;
  console.log("CURRENT TAB IN WILL PROPS:"+currentTab);
  this.setState({
    currentTab: currentTab
  })
}

以上代码将输出显示为：

CURRENT TAB IN WILL PROPS: a

如果在父母的Passing Tab: a中，那么

在孩子的CURRENT TAB IN WILL PROPS: b

中

反之亦然，这里可能出现什么问题？

Answer 1

内部componentWIllRecieveProps传递newProps.tab instead of this.props.tab

componentWillReceiveProps(newProps) {
 var currentTab = newProps.tab;
}

Answer 2

新道具将在变量newProps中。因此，您必须使用newProps.tab来获取传入的道具。

componentWillReceiveProps(newProps) {
  const currentTab = newProps.tab;
  console.log("CURRENT TAB IN WILL PROPS:"+currentTab);
  this.setState({
    currentTab: currentTab
  })
}

在安装的组件之前调用componentWillReceiveProps（）收到新的道具。如果您需要更新状态以响应 prop更改（例如，重置它），您可以比较this.props 和nextProps并使用this.setState（）执行状态转换这种方法。

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

componentWillReceiveProps正在获取以前的道具 - Reactjs

2 个答案: