Question

我需要一个表单值来预填充来自 redux 状态的初始值：

问题是，REDUX 已更新，但 useState 未使用传入的初始值。

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

// local state
// setting up initial state
// =================================================================
const [name, setName] = React.useState(stepInfo.name);
const [description, setDescription] = React.useState(stepInfo.desc);
// =================================================================

<块引用>

输入元素（另一个有 value={description}）

都显示空字段而不是预填充值

<input
  id="impl-name"
  placeholder="gs-sentiment-analysis-impl-1"
  value={name} // ? using here
  onChange={(e) => {
    setName(e.target.value);
    // enable the editing status to true for this step if any state changes
    setEditingStepStatus(1, true);
  }}
/>

调试

  console.log(name, description); // prints '', ''
  console.log(stepInfo); // but this prints the actual values that I want to show

Answer 1

而不是使用状态值。您可以直接在输入中使用 redux 值。它会为您填充初始值。无需使用额外的状态。并在 redux 中编写 reducer 函数并在 onChange 事件中调用它们

 <input
  id="impl-name"
  placeholder="gs-sentiment-analysis-impl-1"
  value={stepInfo.name} // ? using here
  onChange={(e) => {
    //Call redux reducer function for updating name;
    // enable the editing status to true for this step if any state changes
    setEditingStepStatus(1, true);
  }}
/>

Answer 2

好的，感谢 Drew Reese，我能够理解手头的问题。

所以我想出了这个解决方案：

// local state
// setting up initial state
// =================================================================
const [name, setName] = React.useState(stepInfo.name);
const [description, setDescription] = React.useState(stepInfo.desc);

// workaround ?
React.useEffect(() => {
    setName(stepInfo.name);
    setDescription(stepInfo.desc);
}, [stepInfo.name, stepInfo.desc]);
// =================================================================

React useState 没有选择初始状态？

调试

2 个答案: