React 16.4 支持从状态更改调用 getDerivedStateFromProps。如何应对?
React 16.4 enables getDerivedStateFromProps to be called from state change. How to cope with that?
所以 16.4 "fixes" getDerivedStateFromProps 中的一个错误,现在它在道具更改和状态更改时都会被触发。显然这是有意的,来自这个 post: https://github.com/facebook/react/issues/12898。但是对我来说,在状态中保存以前的道具是一个主要的矫枉过正,所以我想问一下是否有人制定了处理这样的情况的程序:
class Componentche extends React.Component {
state = {
valuesForInput: {
input1: ''
}
}
static getDerivedStateFromProps(props, state) {
if (props.someInitialValuesForInput.input1 !== state.valuesForInput.input1) {
return {
valuesForInput: {
...state,
input1: props.someInitialValuesForInput.input1
}
}
}
return state;
render () {
<Input value='valuesForInput.input1' onChange='(e) => setState({valuesForInput: {...this.state, input1: e.target.value }})'
}
}
所以在上面的例子中,我永远不会改变输入,因为 getDerivedStateFromProps 将在收到的新道具和 setState 触发器上执行,我的条件永远不会为假。
那么处理这种情况的正确方法是什么?我是否真的需要将旧道具保留在状态中并将它们也用于条件?
我刚看到这个 post from React 但他们没有提供可行的替代方案。
感谢您的帮助!
解决此类问题的主要思路是始终使用一个事实来源。
实际上他们提供了 2 个推荐的解决方案,在该博客中根本不使用 getDerivedStateFromProps
post:
以及 2 个备选方案:
- 使用 extra prop 跟踪
getDerivedStateFromProps
- 结合使用instance method和
ref
所以 16.4 "fixes" getDerivedStateFromProps 中的一个错误,现在它在道具更改和状态更改时都会被触发。显然这是有意的,来自这个 post: https://github.com/facebook/react/issues/12898。但是对我来说,在状态中保存以前的道具是一个主要的矫枉过正,所以我想问一下是否有人制定了处理这样的情况的程序:
class Componentche extends React.Component {
state = {
valuesForInput: {
input1: ''
}
}
static getDerivedStateFromProps(props, state) {
if (props.someInitialValuesForInput.input1 !== state.valuesForInput.input1) {
return {
valuesForInput: {
...state,
input1: props.someInitialValuesForInput.input1
}
}
}
return state;
render () {
<Input value='valuesForInput.input1' onChange='(e) => setState({valuesForInput: {...this.state, input1: e.target.value }})'
}
}
所以在上面的例子中,我永远不会改变输入,因为 getDerivedStateFromProps 将在收到的新道具和 setState 触发器上执行,我的条件永远不会为假。
那么处理这种情况的正确方法是什么?我是否真的需要将旧道具保留在状态中并将它们也用于条件?
我刚看到这个 post from React 但他们没有提供可行的替代方案。
感谢您的帮助!
解决此类问题的主要思路是始终使用一个事实来源。
实际上他们提供了 2 个推荐的解决方案,在该博客中根本不使用 getDerivedStateFromProps
post:
以及 2 个备选方案:
- 使用 extra prop 跟踪
getDerivedStateFromProps
- 结合使用instance method和
ref