componentWillReceiveProps获取以前的道具

componentWillReceiveProps获取以前的道具 - Reactjs [duplicate](componentWillReceiveProps is getting previous props - Reactjs [duplicate])

这个问题在这里已经有了答案：

componentWillRecieveProps方法无法正常工作：ReactJS 1答案

我通过一个国家作为儿童组件的道具 ，但孩子正在更新以前的道具到其状态。

例如：

我通过状态= a ，然后状态更新为状态= b 。 孩子会将其更新为。

家长：

<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

这是相反的，这里有什么可能是错的？

This question already has an answer here:

componentWillRecieveProps method is not working properly: ReactJS 1 answer

I am passing a state as props in child component, but child is updating previous props to its state.

For example:

I am passing state = a, then state is updated to state = b. Child will update it as a.

Parent:

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

In above code's console.log will give output:

Passing Tab: b

In Child's componentWillMount():

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

And child's componentWillReceiveProps():

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

Above code will display output as:

CURRENT TAB IN WILL PROPS: a

If in parent's Passing Tab: a then

in child's CURRENT TAB IN WILL PROPS: b

It is being vise versa, What could be wrong here?

最满意答案

新的道具将在不同的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

The new props will be in variable newProps. So you have to use newProps.tab to get the incoming prop.

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

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

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