如何使用 Reactjs 和 Typescript 中的 useEffect 更新 object

Question

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

我正在尝试使用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 |   }

Answer 1

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

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

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

Answer 2

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

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

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

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

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