React useState无法读取Redux传入的初始值，导致表单预填充失败？

问题根因 #

useState 仅在组件首次渲染时读取传入的初始值，后续即使初始值依赖的外部变量更新，也不会自动同步到本地 state。首次渲染时 Redux 中的 stepInfo 还未完成加载，stepInfo.name 和 stepInfo.desc 是空值，后续 Redux 状态更新后，本地的 name、description 状态没有同步更新，所以输入框显示为空。

解决方案 #

方案1：用 useEffect 监听 stepInfo 变化同步到本地状态

适合表单编辑状态仅在本地维护，提交时才同步到 Redux 的场景：

// redux
const {
    [1]: stepInfo,
    error,
    saving,
} = useSelector((state) => state.implOnboard);

// 本地状态，添加空值兜底避免报错
const [name, setName] = React.useState(stepInfo?.name ?? '');
const [description, setDescription] = React.useState(stepInfo?.desc ?? '');

// 监听stepInfo变化，同步更新本地状态
React.useEffect(() => {
  if(stepInfo) {
    setName(stepInfo.name ?? '');
    setDescription(stepInfo.desc ?? '');
  }
}, [stepInfo])

方案2：直接使用 Redux 状态作为表单值，移除本地冗余状态

如果表单内容需要实时同步到 Redux，可以去掉本地的 name、description 状态，直接绑定 Redux 取值，变更时触发 dispatch 更新 Redux 即可：

<input
  id="impl-name"
  placeholder="gs-sentiment-analysis-impl-1"
  value={stepInfo?.name ?? ''}
  onChange={(e) => {
    // 替换为对应更新Redux stepInfo的dispatch逻辑
    dispatch(updateImplOnboardStep({step: 1, name: e.target.value}))
    setEditingStepStatus(1, true);
  }}
/>

该方案可以避免双源状态导致的不同步问题，适合需要实时同步Redux的场景。

内容的提问来源于stack exchange，提问作者Karan Kumar