reactjs - useState 没有设置初始状态？

Question

我有一个 SettingsDialog具有作为 Prop 传入的初始设置的组件。然后我使用 useState将当前表单值最初设置为传入的设置:

export default function SettingsDialog({ settings }) {
  const [values, setValues] = useState(settings);
}

但是，这似乎不起作用。 values状态对象始终是一个空对象。如果我添加两个 console.log声明:

export default function SettingsDialog({ settings }) {
  const [values, setValues] = useState(settings);

  console.log('settings:', settings);
  console.log('values:', values);
}

第一个注销正在传入的设置对象，但第二个注销一个空对象。

我是不是不明白 useState hook 应该可以工作，还是我做错了什么？

Answer 1

你得到空值的原因(但设置有值)是因为，当你渲染页面时，对话框被初始化，但此时设置和值的值都为空；然后当您打开对话框时，设置值已被初始化。但是值还没有更新；

如果您希望值随着设置不断更新，请添加:

useEffect(() => {
    setValues(settings);
}, [settings]);