React子组件useState无法识别父组件传入Props的问题求解

问题根因 #

React 的 useState 仅在组件首次挂载时读取传入的初始值，后续父组件更新 props 时，useState 不会自动同步最新的 props 值。
你当前的执行流程是：

1. 父组件 DateTimeFilterComponent 首次渲染时，后端返回的 chartPeriod 还未加载完成，因此 dateFrom、dateTo 是空字符串，此时子组件 DateTimeComponent 挂载，useState(defaultValue) 把初始状态设成了空串。
2. 等后端接口返回、chartPeriod 更新后，父组件传给子组件的 defaultValue 变成了正确的时间字符串，但子组件的内部 state 已经初始化完成，不会自动更新，因此 TextField 显示为空。
   你直接硬编码默认值时，子组件首次挂载就能拿到正确的字符串，所以可以正常显示。

解决方法 #

• 方案1：用 useEffect 监听 props 变化同步 state
  在 DateTimeComponent 中添加副作用监听 defaultValue 的变化，有更新时同步到内部 state：

function DateTimeComponent(props) {
  const { controlName, defaultValue } = props;
  const classes = useStyles();
  const [getDate, setDate] = React.useState(defaultValue);

  // 新增监听逻辑
  React.useEffect(() => {
    setDate(defaultValue);
  }, [defaultValue]);

  const handleChangeDate = e => {
    setDate(e.target.value);
  };

  // 其余返回代码保持不变
}

• 方案2：给子组件添加 key 属性强制重新挂载
  父组件调用 DateTimeComponent 时传入唯一 key，当 dateFrom、dateTo 更新时，React 会销毁旧组件重新挂载新组件，useState 就会重新读取最新的初始值：

<DateTimeComponent 
  key={dateFrom} 
  controlName="dateFrom" 
  defaultValue={dateFrom} 
/>
<DateTimeComponent 
  key={dateTo} 
  controlName="dateTo" 
  defaultValue={dateTo} 
/>

• 方案3：改为受控组件，把状态提到父组件管理
  如果不需要子组件维护独立状态，可以删除子组件内部的 useState，直接把 value 和 onChange 逻辑交给父组件管理，从根源避免状态不同步的问题。

内容的提问来源于stack exchange，提问作者Funky Sloth