React 无法在 useEffect 内部设置状态，不会在当前周期更新状态，而是在下一个周期更新状态。这可能是啥原因造成的？

Posted 2023-03-17

【中文标题】React 无法在 useEffect 内部设置状态，不会在当前周期更新状态，而是在下一个周期更新状态。这可能是啥原因造成的？

【英文标题】：React cannot set state inside useEffect does not update state in the current cycle but updates state in the next cycle. What could be causing this?React 无法在 useEffect 内部设置状态，不会在当前周期更新状态，而是在下一个周期更新状态。这可能是什么原因造成的？

【发布时间】：2021-09-09 02:20:55

【问题描述】：

我正在使用 useEffect 钩子来获取使用 axios 的请求，并因此使用一些接收到的数据更新状态。这是我的 useEffect 钩子和里面的函数：

const [expressions, setExpressions] = useState(expressionData.data);
const getFilteredExp = () => 
    console.log(catFilter);
    let config = 
      method: 'get',
      url: `/expressions/category/$catFilter`,
      headers: 
    ;
    axios(config)
      .then((response) => 
        console.log(response.data);
        const newExp = response.data.payload.data;
        console.log(expressions);
        setExpressions(newExp);
        console.log(expressions);
      )
      .catch((err) => 
        console.error(err);
      )
  

useEffect(() => 
  if (!catFilter) 
    setExpressions(expressionData.data)
    console.log(expressionData.data);
  
  else 
    getFilteredExp();
   
, [catFilter])

catFilter 也是一个状态变量。我的expressions 状态变量不会在setExpressions 调用之后直接更新，而是在一个渲染周期之后更新。不知道如何解决这个问题。getFilteredExp 函数内的控制台日志应该完美地突出我的问题。 These console logs should show my problem 每次更改类别过滤器（catFilter 状态变量）时，页面都会重新渲染，并且之前的 get 请求的结果会在状态下更新。理想情况下，在 get 请求返回包含 5 个项目的数组后，日志应该返回 5 个项目。这显然没有显示在控制台日志中。

此外，即使我的状态更新为延迟渲染，我的依赖于expressions 状态变量的页面内容也不会更新并保持其默认状态。

任何帮助将不胜感激，如果我的问题不是很清楚或遵循一些要求，我很抱歉，我对此比较陌生。

【问题讨论】：

这能回答你的问题吗？ useState set method not reflecting change immediately

@JanezKuhar 不是真的，但它确实澄清了为什么控制台日志没有显示正确的结果，因为 useState 的 set 方法的异步性质。谢谢！

【参考方案1】：

这里的 2 个 console.logs 将显示 expressions 的相同值，因为它们引用了 expressions 的相同副本：

console.log(expressions);
setExpressions(newExp);
console.log(expressions);

如果您想查看expressions 的更改值，可以添加一个useEffect()，在expressions 有机会更改后触发：

useEffect(() => 

    console.log(expressions);

, [expressions]);

我不确定这里是否有足够的信息来为其他问题提供具体的解决方案。如果您仍然卡住，请添加更多信息。