React 无法在 useEffect 内部设置状态在当前周期不更新状态，但在下一个周期更新状态。是什么原因造成的？

Question

我正在使用 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 函数中修复 this.The 控制台日志应该完美地突出我的问题。 These console logs should show my problem 每次我更改类别过滤器（catFilter 状态变量）时，页面都会重新呈现，并且先前的获取请求的结果会在状态中更新。理想情况下，在包含 5 个项目的数组的获取请求 return 之后，日志应该 return 包含 5 个项目。这显然没有显示在控制台日志中。

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

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

Answer 1

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

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

如果你想看到expressions的变化值，你可以添加一个在expressions有机会改变后触发的useEffect():

useEffect(() => {

    console.log(expressions);

}, [expressions]);

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

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?

reactjs

axios

react-hooks

use-effect

use-state

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?

reactjs

axios

react-hooks

use-effect

use-state

React 无法在 useEffect 内部设置状态在当前周期不更新状态，但在下一个周期更新状态。是什么原因造成的？