与getDerivedStateFromProps中以前的道具进行比较

Question

假设一个组件有一个prop'name'和状态'elapse'。

new Component(name) => "Hi {name}. It's been {elapse} seconds"

当道具{name}更改时，{elapse}应重置为0。

到

嗨，鲍勃。已经0秒了

>

GetDerivedStateFromProps不能使用，因为{elapse}不是{name}的纯函数，而且我不能返回0，因为重新呈现时可能会调用它。

GetDerivedStateFromProps如何替换有状态组件中的ComponentWillReceiveProps？

Answer 1

如果你环顾四周，你会发现你不是第一个有这个问题的人--它在github^{1 2 3}和hackernews的一个帖子中被彻底讨论过。推荐的解决方案是在状态中镜像您需要检查的道具：

state = { name: "", lastTime: Date.now() }

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.name !== prevState.name) {
        return { name: nextProps.name, lastTime: Date.now() };
    }
    return null;
}