Question

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

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

现在在16.4中，因为对setState的调用也触发了getDerivedStateFromProps，我看到了一个意想不到的结果。它比较的状态已经更新到新状态（逻辑上？）但由于props或nextProps保持不变，我的比较更新到当前的设置道具。这些在逻辑上没有变化，因为我只改变了状态。所以，我对设置状态的调用现在失败了。也许我做错了？也许它应该与调用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（）的代码块获得的行为，但是，从更高层到道具的更新不会按照它们应该的方式进行处理。

如果我做错了，我道歉，但由于我在16.3中表现不错，如果认为它至少值得讨论。这个人似乎遇到了同样的事情，但我的例子有点容易：Proper use of React getDerivedStateFromProps

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

tldr; 16.3让我在使用getderivedStateFromProps时更改状态，16.4则不然。

Answer 1

然后出现了。今天。 https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

在反应16.4中的getDerivedStatefromProps导致没有状态改变

1 个答案: