react 16.4 中的 getDerivedStatefromProps 不会导致状态更改答案

【问题标题】：getDerivedStatefromProps in react 16.4 results in no state changesreact 16.4 中的 getDerivedStatefromProps 不会导致状态更改
【发布时间】：2018-06-08 01:12:15
【问题描述】：

我不确定当前的行为是否正确。

在 16.3 中，当我有一个通过 props 接收其状态的组件时，我成功地使用了 getDerivedStateFromProps，使用所述函数检查 props 和 state（或者更简洁地说 prevState 和 nextProps）就很好。它会在新的 props 进来时更新状态，并且对状态的更改正常运行。

现在在 16.4 中，因为对 setState 的调用也会触发 getDerivedStateFromProps，所以我看到了意想不到的结果。它比较的状态已经更新为新状态（逻辑上？），但由于 props 或 nextProps 保持不变，我的比较更新为当前设置的 props。这些在逻辑上没有改变，因为我只改变了状态。所以，我现在设置状态的调用失败了。也许我做错了？也许它应该与调用 setState 之前的状态进行比较？这是我所期望的，并且会解决问题，因为真正的先前状态将与道具匹配并且不会发生任何变化。

这是一个例子： https://jsfiddle.net/rjacks24/1yupwngv/

 class Example extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        stopped: this.props.stopped || false
    };

    this.wasToggled = false;
    this.toggleStop = this.toggleStop.bind(this);
}

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

/**
 * function to handle the stop of the antenna
 * @returns {void}
 */
toggleStop() {
    this.wasToggled = !this.wasToggled;
    this.setState({
        stopped: !this.state.stopped
    });
}

render() {
    return (
        <div>
            <button
                type="button"
                onClick={this.toggleStop}
                className={this.state.stopped ? "done" : ""}
            >
                Toggle
            </button>
            State Toggled? {this.state.stopped ? "yes" : "no"}
            <div>
                But Actually... wasToggled: {this.wasToggled ? "yes" : "no"}{" "}
            </div>
        </div>
    );
}
}

预期的行为是您通过删除 getDerivedStateFromProps() 的代码块获得的行为，但是，从 heigher 到 props 的更新不会按应有的方式处理。

如果我做错了，我深表歉意，但由于我在 16.3 中表现出色，如果认为至少值得提出讨论。这个人似乎也遇到了同样的事情，但我的例子要简单一些：Proper use of React getDerivedStateFromProps

我的猜测是，在这些情况下，正确的方法是始终处理 HOC 上的状态，然后调用 gdsfp 是没有问题的。

tldr; 16.3 让我在使用 getderivedStateFromProps 时更改状态，16.4 没有。

【问题讨论】：

标签： reactjs