反应使用状态设置初始值不起作用

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 可能为空，并且此空值将保留在那里以供后续渲染。

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

Answer 2

应确保props.data.status不为空。

如果props.data.status为空，则回退值空字符串''将确保status不是未定义的。

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];
const [status, setStatusValue] = useState(defaultStatus || '');

//using effect hooks and deps to execute logic as componentWillMount
useEffect(() => {
// check that props.data.status is non-empty and update statusValue
if (props.data.status !== '') {
setStatusValue(props.data.status);
}
}, [props.data.status]);

Answer 3

您可能不想在状态中使用整个状态对象，而只想使用值。

此外，您可以使用函数仅设置一次状态的默认值：

const statusOptions = [
{ label: "Active", value: "active" },
{ label: "Inactive", value: "inactive" },
{ label: "Complete", value: "completed" },
];
const Thing = ({ data }) => {
const [statusValue, setStatusValue] = useState(() => {
const currentStatus = statusOptions.find(
option => option.value === data.status,
);
// Default to `completed` if there was no value in the props
return currentStatus ? currentStatus.value : "completed";
});
const status = statusOptions.find(
option => option.value === statusValue,
);
return <div>{JSON.stringify({ data, statusValue, status })}</div>;
};