Javascript 如何在Reactjs和Typescript中使用useEffect更新对象

我对

Reactjs

+

Typescript

非常陌生，我正在试图找出为什么会出现下面的错误

React 16.9

const STEP_STATUS = {
  COMPLETED: "Completed",
  INCOMPLETE: "Incomplete",
};

const Foo = () => {
  const [state, setState] = useState({
    step: 1,
    firstName: '',
    lastName: '',
    status: STEP_STATUS["INCOMPLETE"],
  });

const nextStep = () => {
    setState({...state, step: state.step + 1});
  }

useEffect(() => {
    if (state.step + 1 !== state.step) {
      // setState(prev => {...prev, state.step = STEP_STATUS["COMPLETED"]}); // I tried this too
      setState(...state, state.status = STEP_STATUS["COMPLETED"]);
    } else {
      console.log("error");  // don't mind this line
    }
  }, [state]);

我正在尝试使用

useffect

创建副作用，按下按钮

nextStep

（将用户带到下一页）后，我想在进入下一页之前将当前页的状态更新为“已完成”

我可能真的做错了

任何帮助都会很有帮助

电流误差

---

您需要在setState调用周围放置对象大括号，如下所示：

setState({...state, status: STEP_STATUS["COMPLETED"]})

---

此外，建议使用传递给setState的prevState值进行更新，以防止用户关闭。

我认为使用整个

状态作为
useffect
钩子上的依赖项数组不是一个好主意。这实际上会导致
useffect
钩子中更新
state
时出现一个INIFIME循环，该循环将导致反复触发

看看您试图实现的目标，我相信
state.step
应该在依赖项数组中。此外，在引用对象内的属性时使用了错误的语法。不要使用equal（
=
），而应该使用冒号（
：
）

如果您试图使用
setState
中的回调，则可以修改为：

setState((prevState) => ({
  ...prevState,
  status: STEP_STATUS["COMPLETED"]
})); 

好的电话谢谢-你知道为什么在重新阅读页面后，它已经更新为
已完成
。仅当按下按钮
nextStep
时，我才尝试更新状态。何时启动
nextStep
方法？我假设当单击按钮时？正确，
nextStep
方法仅在单击按钮后触发，但当前当我查看
控制台时。日志
在我按下该按钮之前，
状态
会自动更新为
已完成
。您是否在
useffect（）上设置了依赖项数组
是否要对此进行修改<代码>[state.step]

。如我在答复中所述？此外，您的代码中是否有其他内容正在更改

state.step

的值？我按照您所说的做了…第一行的

if

语句，逻辑不正确，我试图将其更改为

if（state.step>1）{

以查看差异。你知道这种逻辑可能是什么吗？我指的是这一行

如果（state.step+1！==state.step）{

你知道为什么在页面重新加载后它已经更新为

已完成

。我只在按下按钮

下一步

时才尝试更新状态。

useEffect(() => {
  setState({
    ...state,
    status: STEP_STATUS["COMPLETED"]
  });
}, [state.step]);

setState((prevState) => ({
  ...prevState,
  status: STEP_STATUS["COMPLETED"]
}));