Reactjs - 在子组件中使用 setState 从props设置状态

IT技术 javascript reactjs
2021-02-07 13:00:05

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

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' 因为props没有改变时，函数不会第二次触发。但是我想像我第一次在componentWillReceiveProps函数中那样更新状态变量。

怎么做？

2个回答

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

componentWillMount ()
{

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


}
setState 是异步的。你不应该在componentWillMount. 使用componentDidMount来代替。
2021-03-15 13:00:05
我不明白你的代码。你真的要重新定义componentWillReceiveProps•inside•componentWillMount吗？那会做什么？
2021-03-16 13:00:05
只需在 willmount 内设置状态
2021-03-16 13:00:05
但是 componentDidMount 在页面渲染一次后被调用，但在这种情况下，我们必须在第一次渲染页面完成之前进行任何更改
2021-03-16 13:00:05
当然，现在说得通:)
2021-04-03 13:00:05

正如@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更改，

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

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

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

<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 };
}
@RaajNadar 完成
2021-04-02 13:00:05
对不起，伙计，在为您的答案投票时我按下了否决按钮，并且在您编辑答案之前投票被锁定。请编辑答案，以便我可以删除我的投票。
2021-04-11 13:00:05
其它你可能感兴趣的问题
上一篇IE 中使用 ES6 箭头函数的语法错误 下一篇ion-content 和 ion-footer 有不同的 $scope