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

Posted 2023-02-22

【中文标题】反应自定义组件 - 无法根据道具设置状态

【英文标题】：React custom component - can't set state based on props

【发布时间】：2019-12-27 02:58:03

【问题描述】：

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

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 字段

【参考方案1】：

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

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


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

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

【讨论】：

非常感谢！这是一个有趣的选择。更有趣的是官方文档中的小节 reactjs.org/docs/… 说“如果您需要执行副作用（例如，数据获取或动画）以响应道具的变化，请改用 componentDidUpdate 生命周期。”事实证明，我可以在不引起递归的情况下从 componentDidUpdate 更改状态！