反应自定义组件 - 无法根据道具设置状态

Question

我必须将自定义日期选择器组件与内部状态绑定：

this.state = {
  selectedDate: null,
  dateText: ""
};

到一个 redux-form Field 组件。规则很简单——来自我的自定义组件外部的值将通过 redux-form 和 props 传递给它：

{input: {value: "10-10-2010"} }

如您所见，我的自定义组件不会反映这个新值，因为它的内部字段绑定到它的状态：

<TextField
  value={this.state.dateText}
  onChange={this.handleDateInputChange}
/>

所以我需要根据这个道具以某种方式设置我的内部状态。这是问题开始的地方：

• 如果我尝试比较 shouldComponentUpdate 中的上一个和下一个 Props 值（目的是防止 render() 如果它只是来自父组件的一个 prop 更新），我会在 TextInput 响应性方面遇到非常奇怪的问题- 就像必须按两次退格键才能删除一个字符。
• 如果我尝试在 render() 以及其他生命周期挂钩中设置状态，它显然会失败
• 如果我尝试将 TextField 绑定到 props.input.value 它将不起作用，因为“props 用于将值传递给组件”

如果我的意思是“更新内部状态”，我如何根据传入的道具更新组件的内部状态：

• setState，让TextField用props显示父组件传入的值
• 重新创建内部 selectedDate 字段

Answer 1

您可以尝试使用getDerivedStateFromProps。该方法在 React 类组件中可用并且是静态的。在这里，您可以根据更新的属性更新组件的状态。为此还要将最后一个属性值保存在状态中以便于比较

state = {
   propDateText: this.props.dateText,
   dateText: "",
}

getDerivedStateFromProps({ dateText }, { propDateText }) {
  if(propDateText !== dateText) {
     return { dateText, propDateText: dateText }
  }
  return null
}

这会将最后设置的属性dateText 与实际属性进行比较，并将相应地替换状态内的dateText。