我听说过 getDerivedStateFromProps
,但它并没有按照我想要的方式工作。
我有这个代码:
class App extends Component {
static getDerivedStateFromProps(props, state) {
console.log("Get derived state from props called");
return null;
}
render() {
return (
<button onClick={() => this.setState({})}>Change State</button>
);
}
}
单击按钮调用 getDerivedStateFromProps
。这不是我需要的。我想要一个仅在收到新 Prop 时调用的函数。当内部状态发生变化时,不应调用此函数。
我打算在模态表单场景中使用它。当组件接收到一个对象作为 prop 时,组件应该将这个对象转换成一种形式,然后将该形式放入状态中。如果我使用 getDerivedStateFromProps
,因为它在每个 this.setState()
中被调用,它不会反射(reflect)表单中的变化,因为每当用户键入时,一个 this.setState()
被触发,而不是将更改设置到状态中,而是初始对象。
我应该使用哪种 React 生命周期方法?
最佳答案
根据不同的用例,有几种方法可以解决这个问题。
- 如果添加了新的 props,可以在
Child
组件中检查这些新的 props,如果新对象存在,可以调用用户定义的函数。 getDerivedStateFromProps(props, state, prevProps)
是一个静态方法并且this
不存在于同一个,这意味着你必须返回一个基于状态的在各种条件下。也就是说,让它在大多数情况下默认工作。在您想要更改其功能的情况下,进行检查并返回修改后的状态。
希望它能回答:)
关于javascript - 哪种 React 生命周期方法可以很好地替代 componentWillRecieveProps?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50597113/