React useState 设置初始值没有效果

Question

以下是我的功能组件与问题的相关代码，

在 useState() 钩子中对数据进行一些处理后，如何设置初始值？

const data = props.data ? props.data : {};
const statusOptions = [
  { label: "Active", value: "active" },
  { label: "Inactive", value: "inactive" },
  { label: "Complete", value: "completed" },
];
const defaultStatus = statusOptions.filter(
  option => option.value === data["status"],
)[0];

//This does not work
const [status, setStatusValue] = useState(defaultStatus);
console.log(status); //undefined

//Below works
const [status, setStatusValue] = useState({
  label: "Complete",
  value: "completed",
});
console.log(status); //{label:"Complete",value:"completed"}

Answer 1

如果您面临同样的问题，我认为这可能会有所帮助

initialState 参数是初始渲染期间使用的状态。在随后的渲染中，它被忽略。

因此，如果数据不可用，我们不应该渲染组件，因为 initialState 可能为空，并且此空值将保留在那里用于后续渲染。

我希望这可能会有所帮助。