Reactjs - 使用子组件中的setState从props设置State

Question

我有以下类根据排序下拉列表呈现用户。 如果我选择“按字母顺序”，则按字母顺序列出用户，当我选择“组”时，将按组顺序列出。

render(){
    return(
        const {members, sort} = this.state
        { sort === "alphabetical" && <SortByAlphabet members={members} /> }
        { sort === "group" && <SortByGroup members={members}/> }
    )
)

在<SortByAlphabet />组件中，我从componentWillReceiveProps()函数中的props.members设置组件状态对象。

componentWillReceiveProps = props => {
    this.setState({ members : props.members });
}

当我选择“group”排序时， <SortByAlphabet />组件将被卸载并且<SortByGroup />将安装在DOM中。 再次当我切换回“按字母顺序”排序时，在<SortByAlphabet />组件中<SortByAlphabet />设置的状态变量（成员）变为NULL，因为该组件已从DOM中删除。

componentWillReceiveProps函数没有在第二次触发时重新渲染<SortByAlphabet /> b'coz道具没有改变。 但我想更新状态变量，就像我第一次在componentWillReceiveProps函数中做的那样。

怎么做？

Answer 1

正如@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 });
}

从版本16.3.0开始，您将使用getDerivedStateFromProps方法更新状态以响应props更改，

在实例化组件之后以及在接收新的props时调用getDerivedStateFromProps 。 它应该返回一个更新状态的对象，或者返回null以指示新的props不需要任何状态更新。

static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.members !== prevState.memebers) {
         return { members: nextProps.members };
    }
    return null;
}

编辑：从v16.4开始，getDerivedStateFromProps API发生了变化，它接收道具，作为参数进行状态调整，并在每次更新时调用以及初始渲染。 在这种情况下，您可以通过更改密钥来触发组件的新安装

<SortByAlphabet  key={members} />

并且在SortByAlphabet中有

componentWillMount() {
     this.setState({ members : this.props.members });
}

或使用getDerivedStateFromProps之类的

static getDerivedStateFromProps(props, state) {
    if(state.prevMembers !== props.members) {
         return { members: nextProps.members, prevMembers: props.members };
    }
    return { prevMembers: props.members };
}

Answer 2

componentWillMount仅在组件生命周期中调用一次，紧接在呈现组件之前。 它通常用于执行初始渲染之前所需的任何状态更改，因为在此方法中调用this.setState不会触发其他渲染所以您可以使用更新您的staate

componentWillMount ()
{

        this.setState({ members : props.members });


}