时间戳

首页 > 解决方案 > 同步响应更新状态

reactjs - 同步响应更新状态

问题描述

我有一个Master包含多个组件的Child组件。子状态保存在 Master 中。孩子获得的第一个状态是FORM_LOADED。然后我的主组件中有以下代码。

const Master = (props) => {
  const [formStates, setFormStates] = useState()

  useEffect(() => {
    setFormStates({...formStates, Master: "FORM_LOADED"})
  },[])

  render (
    <>
      <Child view="Model1" formStates={formStates} setFormStates={setFormStates} />
      <Child view="Model2" formStates={formStates} setFormStates={setFormStates} />
      <pre>{JSON.stringify(formStates, undefined, 4)}</pre>
    </>
  )
}

const Child = (props) => {
  useEffect(() => {
    props.setFormStates({...props.formStates, [props.view]: "FORM_LOADED"})
  }, [])
  render (
    <p>{props.view}</p>
  )
}

我的问题是状态变量formStates总是得到：

{
  Master: "FORM_LOADED",
  Model2: "FORM_LOADED"
}

Model1没有出现在formStates. 如果我添加更多子组件，则只有最后一个组件反映在formStates. 我怎样才能让 Model1 到formStates?

标签： reactjsuse-state

解决方案

我不确定是否了解所有内容，但在 setState() 方法中您可以获得旧值。你可以这样做：

  useEffect(() => {
    props.setFormStates((oldVal) =>({...oldVal, ...props.formStates, [props.view]: "FORM_LOADED" }));
  });
  return <p>{props.view}</p>;
};```

推荐阅读