【问题标题】：how to update an object using useEffect in Reactjs and Typescript如何在 Reactjs 和 Typescript 中使用 useEffect 更新对象
【发布时间】：2020-09-18 12:17:31
【问题描述】：

我对@987654321@ + 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]);

我正在尝试使用useEffect 创建一个副作用，在按下按钮nextStep（将用户带到下一页）后，我想更新当前页面的状态在我们进入下一页之前“完成”。

我可能真的做错了。

任何帮助都会非常有帮助。

当前错误

×
TypeError: state is not iterable
  53 | useEffect(() => {
  54 |   if (state.step + 1 !== state.step) {
  55 |     // setState(prev => {...prev, state.step = STEP_STATUS["COMPLETED"]});
> 56 |     setState(...state, state.status = STEP_STATUS["COMPLETED"]);
     | ^  57 |   } else {
  58 |     console.log("error");
  59 |   }

【问题讨论】：

标签： javascript reactjs typescript react-native react-redux

【解决方案1】：

我认为将整个state 用作useEffect 挂钩上的依赖数组并不是一个好主意。这实际上会导致在useEffect 挂钩内更新state 时出现无限循环，这将导致它被一遍又一遍地触发。

看看你想要实现的目标，我相信state.step 应该在依赖数组上。此外，您使用了错误的语法来引用对象内的属性。您应该使用冒号（:），而不是使用相等（=）。

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

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

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

【讨论】：

很好，谢谢 - 你知道为什么它在重新渲染页面后已经更新为completed。我只在按下按钮 nextStep 时才尝试更新状态。
nextStep 方法何时触发？我假设单击按钮时？
正确，nextStep 方法仅在单击按钮后触发，但目前当我查看console.log 时，status 在我按下该按钮之前自动更新为completed。
您是否将useEffect() 上的依赖数组设置为此？ [state.step]。如我的回答所述？此外，您的代码中是否还有其他内容正在改变 state.step 的值？
我按照你说的做了...第一行的if语句，逻辑不正确，我试着把它改成if (state.step > 1) {看看有什么不同。你知道这个逻辑可能是什么吗？我指的是这一行if (state.step + 1 !== state.step) {

【解决方案2】：

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

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

还建议使用传递给 setState 的 prevState 值进行更新，以防止 clousers。

【讨论】：

你知道为什么在重新渲染页面后它已经更新为completed了吗？我试图仅在按下按钮 nextStep 时更新状态。