React中更新state后控制台打印旧值，状态与函数内数值不一致求助

React的setState是异步批量更新的，调用setCount后，当前函数作用域内的count并不会立刻更新。点击按钮时，你先调用setCount，紧接着执行nextDiv/preDiv，这时候打印的还是旧的count值；而组件重新渲染时，Main里的console.log会拿到更新后的count，所以两者数值不一致。

方案1：给nextDiv/preDiv传入新的count值 #

直接在更新状态时计算出新的count，传递给对应的函数：

const increment = () => {
  let newCount;
  if (count < Data.length - 1) {
    newCount = count + 1;
  } else {
    newCount = 0;
  }
  setCount(newCount);
  nextDiv(newCount); // 传入新值
};

const decrement = () => {
  let newCount;
  if (count > 0) {
    newCount = count - 1;
  } else {
    newCount = Data.length - 1;
  }
  setCount(newCount);
  preDiv(newCount); // 传入新值
};

const nextDiv = (newCount) => {
  console.log("nextDiv", newCount);
};

const preDiv = (newCount) => {
  console.log("PreDiv", newCount);
};

方案2：使用setState的回调函数 #

利用setState的第二个参数（状态更新完成后的回调），在回调里执行nextDiv/preDiv，此时能拿到更新后的count：

const increment = () => {
  if (count < Data.length - 1) {
    setCount(count + 1, () => {
      nextDiv();
    });
  } else {
    setCount(0, () => {
      nextDiv();
    });
  }
};

const decrement = () => {
  if (count > 0) {
    setCount(count - 1, () => {
      preDiv();
    });
  } else {
    setCount(Data.length - 1, () => {
      preDiv();
    });
  }
};

// nextDiv/preDiv无需修改，此时打印的是更新后的count
const nextDiv = () => {
  console.log("nextDiv", count);
};

const preDiv = () => {
  console.log("PreDiv", count);
};

方案3：用useEffect监听count变化 #

如果nextDiv/preDiv的逻辑是依赖count更新而执行的，更推荐用useEffect监听count，自动触发：

import { useState, useEffect } from 'react';

const App = () => {
  const [heading, setHeading] = useState("");
  const [img, setImg] = useState("");
  const [count, setCount] = useState(0);

  console.log("Main", count);

  useEffect(() => {
    // 可以根据需求判断执行nextDiv或preDiv，比如记录上一次count区分操作类型
    nextDiv();
    // 或 preDiv();
  }, [count]); // count变化时自动触发

  const increment = () => {
    setCount(prev => prev < Data.length - 1 ? prev + 1 : 0);
  };

  const decrement = () => {
    setCount(prev => prev > 0 ? prev - 1 : Data.length - 1);
  };

  const nextDiv = () => {
    console.log("nextDiv", count);
  };

  const preDiv = () => {
    console.log("PreDiv", count);
  };

  // ... 其余代码不变
};

这种方式更符合React状态驱动的设计理念，把状态变化和副作用逻辑解耦。

内容的提问来源于stack exchange，提问作者Abhishek Rauthan