Reactjs React useState设置初始值无效

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

在useState（）钩子中处理数据之后，如何设置初始值

---

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

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

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>;
};

const statusOptions=[
{标签：“活动”，值：“活动”}，
{标签：“非活动”，值：“非活动”}，
{标签：“完成”，值：“完成”}，
];
常量对象=（{data}）=>{
const[statusValue，setStatusValue]=useState（（）=>{
const currentStatus=statusOptions.find(
option=>option.value==data.status，
);
//如果道具中没有值，则默认为“已完成”
返回currentStatus？currentStatus.value：“已完成”；
});
const status=statusOptions.find(
option=>option.value===statusValue，
);
返回{JSON.stringify（{data，statusValue，status}）}；
};

您应该确保

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]);

---

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

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

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

---

我希望这会有所帮助。

您的数据变量可能为空。您需要更新useEffect钩子中的状态，并将props.data作为依赖项。您的筛选器返回空数组。因此，

defaultStatus

的值未定义，因为空数组的索引0将未定义。执行

defaultStatus

的console.log。顺便说一句，执行此操作的简单方法是：

const data=props.data？props.data:{}是
const{data={}}=props
@VaibhavVishal filter在执行
console.log（）
时不会返回undefined。我想过滤功能需要一些时间才能执行，在设置状态完成之前。不，你的道具会改变，每次道具改变时都会有多个控制台日志，检查第一个日志。当过滤器第一次是空数组，然后道具改变时，过滤器现在返回值。initialState将只设置一次。按照回答中的建议，将
setStatusValue
放入
useffect
中。实际上，我需要整个对象，因为我正在
react select
组件中使用它，并进行材质ui自定义。我尝试在
useffect
钩子中使用
[]
作为
deps
实现同样的效果，但仍然无法让它工作。顺便说一句，数据非常好，我已经整理好了。我答案中的
const 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]);