使用 prevState 更新状态但是当来自父级的道具改变时

Question

我有一个父 class 组件，它向子 class 组件发送道具。传递的道具是单选按钮是否是 3 个文本字符串之一。单击单选按钮后，Parent 会将选定的文本字符串作为 prop 发送到子组件。然后使用此函数对其进行评估：

public componentWillReceiveProps(){

        if(this.props.stateFromParent === 'New'){
            this.setState({IsEvalTypeDisabled: true }, () => {console.log(this.state.IsEvalTypeDisabled+'this.state.IsEvalDistrue');});
            return 'New';
        } else if(this.props.stateFromParent === 'Re-evaluation') {
            this.setState({IsEvalTypeDisabled: false }, () => {console.log(this.state.IsEvalTypeDisabled+'this.state.IsEvalDisfalse');});
            return 'Re-evaluation';
        } else if(this.props.stateFromParent === 'Appeal') {
            this.setState({IsEvalTypeDisabled: false }, () => {console.log(this.state.IsEvalTypeDisabled+'this.state.IsEvalDisfalse');});
            return 'Appeal';
        }
    }

上面的函数是这样设计的，它根据父级的 props 传递的字符串在 true 和 false 之间更改布尔 IsEvalTypeDisabled。它只工作了一半，但我认为我在 setState 中缺少 prevState，因为当我单击 New 时，'Re-evaluation' 或 'Appeal' 它会成功更改，但是如果我单击 'Re-evaluation' 到 'Appeal' 它不会改变布尔值。如果我然后单击“新建”，然后返回“上诉”或“重新评估”，它会起作用（因为它会将其轻弹到正确的布尔值）。

Answer 1

您正在设置从 "Appeal" 到 "Re-evaluation" 的相同布尔值。 If 子句应该没问题，但 setState 基本上得到与它已经拥有的值相同的值，因此不应该发生重新渲染。

只需使用 nextProps。 "this.props" 指的是您当前的道具，未更改。

public componentWillReceiveProps(nextProps){
    if(nextProps.stateFromParent === 'New'){
        this.setState({IsEvalTypeDisabled: true });
    } else if(nextProps.stateFromParent === 'Re-evaluation') {
        this.setState({IsEvalTypeDisabled: false });
    } else if(nextProps.stateFromParent === 'Appeal') {
        this.setState({IsEvalTypeDisabled: false });
    }
}

无论如何，如@ggovan 所述，此生命周期事件已弃用。

关于该主题的更多信息Link to medium

正在回答您关于 getDerivedStateFromProps 的问题：

static getDerivedStateFromProps(nextProps, prevState){
   if (nextProps.stateFromParent === "New") {
       return { IsEvalTypeDisabled: true };
   } else if .....
   else return null; // Triggers no change in the state
}

使用 prevState 更新状态但是当来自父级的道具改变时

Using prevState to update state but when props from parent change

reactjs

spfx