useState 没有设置初始状态？

Question

我有一个SettingsDialog组件，它具有作为道具传入的初始设置。然后我使用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钩子应该如何工作，或者我只是做错了什么？

Answer 1

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

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

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

Answer 2

您发布的代码按预期工作：

import React from "react";
import ReactDOM from "react-dom";

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

  console.log("settings:", settings); // {default: "value"}
  console.log("values:", values); // {default: "value"}

  return null;
}

function App() {
  return <SettingsDialog settings={{ default: "value" }} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我能想到的可能有两个问题：

1. settings={{ default: "value" }}使用时没有被传递SettingsDialog

2. SettingsDialog在渲染之间重复使用并且不会重新初始化。如果这是您的问题，请确保设置了key属性。SettingsDialog以下是尝试在有键和无键之间切换的示例： https://codesandbox.io/s/with-and-without-keys-9o793