在 UseEffect 间隔后反应 useState 不存储新值

Question

我想存储"jokes" 并在每次间隔5 秒后运行（进行get 调用）时控制台记录一个新值。但是，在每个间隔之后，该值不会呈现任何内容。我不确定是否正在调用和捕获笑话，因为它打印为JOKE: []。我的最终目标是使用"joke" 状态创建逻辑。

如果你想自己测试，https://codesandbox.io/s/asynchronous-test-mp2fq?file=/AutoComplete.js

  const [joke, setJoke] = React.useState([]);

  React.useEffect(() => {
    const interval = setInterval(() => {
      axios.get("https://api.chucknorris.io/jokes/random").then((res) => {
        setJoke(res.data.value);
        console.log("JOKE: ", joke); // <- Doesn't print every time it is called.
      });

      console.log("Every 5 seconds");
    }, 5000);

    if (joke.length !== 0) {
      clearInterval(interval);
      console.log("Returns True");
    }

    return () => clearInterval(interval);
  }, []);

Answer 1

您的setJoke 电话确实有效。问题是在setJoke 之后立即调用console.log。正如this 问题的答案中提到的，setState 是异步的。您可以在React docs 中找到此问题的说明：

对 setState 的调用是异步的 - 不要依赖 this.state 在调用 setState 后立即反映新值。如果您需要根据当前状态计算值，请传递更新函数而不是对象（详情请参见下文）。

您可以通过将joke 变量添加到 JSX 中看到它每 5 秒更改一次：

return (
    <>
    {JSON.stringify(joke)}
      <Autocomplete
        sx={{ width: 300 }}
        open={open}
        onOpen={() => {
          setOpen(true);
        }}
    ...

Answer 2

例如，为了实现您的目标，您必须将代码拆分为两个 useEffect 调用：

  const [joke, setJoke] = React.useState([]);

  React.useEffect(() => {
    const interval = setInterval(() => {
      axios.get("https://api.chucknorris.io/jokes/random").then((res) => {
        if (res.data.value.length !== 0) {
          setJoke(res.data.value);
          clearInterval(interval);
          console.log("Returns True");
        }
      });

      console.log("Every 5 seconds");
    }, 5000);


    return () => clearInterval(interval);
  }, []);

  React.useEffect(() => {
    // here you can write any side effect that depends on joke
  }, [joke]);