reactjs - 无法使用 useState 以编程方式更改组件的值

Question

我试图在使用 useState 时以编程方式更改状态钩。

我是这样定义的:

const [data, setData] = React.useState({
   text: "Hello StackOverflow!",
   someNumber: 2
});

出于测试目的，我创建了一个增加 someNumber 的间隔。每一秒。

setInterval(() => {
  setData({ ...data, someNumber: data.someNumber + 1 });
}, 1000);

当我现在安装组件时，文本开始以不同的数字快速闪烁。我猜 Interval 已多次启动，但我不知道为什么。这是我第一个使用新钩子(Hook)的项目。

可以找到我的代码的完整示例 on code sandbox snippet

如果链接断开，这是组件:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function StateTextFields() {

  const [data, setData] = React.useState({
    text: "Hello StackOverflow!",
    someNumber: 2
  });

  setTimeout(() => {
    setData({ ...data, text: "How are you?" });
  }, 1000);

  setInterval(() => {
    setData({ ...data, someNumber: data.someNumber + 1 });
  }, 1000);

  return (
        <TextField
          id="standard-name"
          label="Name"
          value={data.text + " " + data.someNumber}
          margin="normal"
        />
  );
}

Answer 1

移动您的setInterval在 useEffect 内.这将阻止它在每次渲染时创建新的间隔。

React.useEffect(() => {
  setInterval(() => {
      setData(prevState => ({ ...prevState, someNumber: prevState.someNumber + 1 }));
    }, 1000);
  setTimeout(...)
},[])

这将使这些功能仅在组件安装时运行一次。

无条件调用修改功能组件内部状态的函数就像在 render 中执行相同操作。的一个类组件。它将修改状态，这会导致重新渲染，这将无限地修改状态，依此类推。

您需要使用 prevState回调更新。这是因为 useEffect未收听对 data 所做的更改喜欢 useEffect(() => {}, [data])制作 data变得陈旧。但是我们也不想改变它来监听变化，因为那会导致你的间隔再次被无限地创建。所以我们使用 prevState它总是使用最新的状态副本。