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 });
}

当我选择"组"排序时,<SortByAlphabet />组件将被卸载并<SortByGroup />挂载在DOM中.再次当我切换回"按字母顺序"排序时,在<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方法来更新状态以响应道具更改,

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不会触发其他渲染，因此您可以使用来更新状态

componentWillMount ()
{

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


}