[英]Reactjs - Setting State from props using setState in child component
I'm having the following class that renders users based on a sort dropdown. 我有以下类根据排序下拉列表呈现用户。 Users will be listed in alphabetical order if i choose "alphabetical" and in group order when i choose "group".
如果我选择“按字母顺序”,则按字母顺序列出用户,当我选择“组”时,将按组顺序列出。
render(){
return(
const {members, sort} = this.state
{ sort === "alphabetical" && <SortByAlphabet members={members} /> }
{ sort === "group" && <SortByGroup members={members}/> }
)
)
In <SortByAlphabet />
component I am setting a component state object from props.members in componentWillReceiveProps()
function. 在
<SortByAlphabet />
组件中,我从componentWillReceiveProps()
函数中的props.members设置组件状态对象。
componentWillReceiveProps = props => {
this.setState({ members : props.members });
}
When I choose "group" sort, <SortByAlphabet />
component is unmounting and <SortByGroup />
is mounting in the DOM. 当我选择“group”排序时,
<SortByAlphabet />
组件将被卸载并且<SortByGroup />
将安装在DOM中。 Again when i switch back to "alphabetical" sort, the state variable (members) that was set previosly in <SortByAlphabet />
component becomes NULL because the component was removed from the DOM. 再次当我切换回“按字母顺序”排序时,在
<SortByAlphabet />
组件中<SortByAlphabet />
设置的状态变量(成员)变为NULL,因为该组件已从DOM中删除。
componentWillReceiveProps
function is not triggering the second time when re-rendering <SortByAlphabet />
b'coz the props didn't change. componentWillReceiveProps
函数没有在第二次触发时重新渲染<SortByAlphabet />
b'coz道具没有改变。 But i want to update the state variable like i did it for the first time in componentWillReceiveProps
function. 但我想更新状态变量,就像我第一次在
componentWillReceiveProps
函数中做的那样。
How to do that? 怎么做?
As @Vikram also said, componentWillReceiveProps
is not called for the first time, so when your component is initially mounted your state is not getting set, so you need to set the state with props in the componentWillMount/componentDidMount
function(which are called only on the first render) also along with the componentWillReceiveProps
function 正如@Vikram所说,
componentWillReceiveProps
没有第一次被调用,所以当你的组件最初被挂载时你的状态没有被设置,所以你需要在componentWillMount/componentDidMount
函数中设置带有props的状态(仅在第一个渲染)也与componentWillReceiveProps
函数一起使用
componentWillReceiveProps = props => {
if(props.members !== this.props.members) {
this.setState({ members : props.members });
}
}
componentWillMount() {
this.setState({ members : this.props.members });
}
From version 16.3.0 onwards, you would make use of getDerivedStateFromProps
method to update the state in response to props change, 从版本16.3.0开始,您将使用
getDerivedStateFromProps
方法更新状态以响应props更改,
getDerivedStateFromProps
is invoked after a component is instantiated as well as when it receives new props.在实例化组件之后以及在接收新的props时调用
getDerivedStateFromProps
。 It should return an object to update state, or null to indicate that the new props do not require any state updates.它应该返回一个更新状态的对象,或者返回null以指示新的props不需要任何状态更新。
static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.members !== prevState.memebers) {
return { members: nextProps.members };
}
return null;
}
EDIT: There has been a change in getDerivedStateFromProps API from v16.4 where it receives props, state as arguments and is called on every update along with initial render. 编辑:从v16.4开始,getDerivedStateFromProps API发生了变化,它接收道具,作为参数进行状态调整,并在每次更新时调用以及初始渲染。 In such a case, you can either trigger a new mount of the component by changing the key
在这种情况下,您可以通过更改密钥来触发组件的新安装
<SortByAlphabet key={members} />
and in SortByAlphabet have 并且在SortByAlphabet中有
componentWillMount() {
this.setState({ members : this.props.members });
}
or use getDerivedStateFromProps like 或使用getDerivedStateFromProps之类的
static getDerivedStateFromProps(props, state) {
if(state.prevMembers !== props.members) {
return { members: nextProps.members, prevMembers: props.members };
}
return { prevMembers: props.members };
}
componentWillMount is called only once in the component lifecycle, immediately before the component is rendered. componentWillMount仅在组件生命周期中调用一次,紧接在呈现组件之前。 It is usually used to perform any state changes needed before the initial render, because calling this.setState in this method will not trigger an additional render So you can update your staate using
它通常用于执行初始渲染之前所需的任何状态更改,因为在此方法中调用this.setState不会触发其他渲染所以您可以使用更新您的staate
componentWillMount ()
{
this.setState({ members : props.members });
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.