Question

我有一个SettingsDialog组件，其初始设置作为props传入。然后，我使用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);

我可能想到两个问题：

settings={{ default: "value" }}

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

Answer 3

我似乎也遇到了同样的问题。以下是我遇到的问题的相关代码。当我将uid作为道具传递并尝试在此处初始化Uid的状态时，我收到一条错误消息，指出useState不能未定义：/

export default function Home(props) {

    const [ Uid, setUid ] = useState(props.uid);
}

useState是否未设置初始状态？

3 个答案: