React中调用setCustomers后console.log(customers)显示空数组求助

AI 小北

2026-8-1

React useState更新后立即console.log仍显示旧值的问题

这不是代码bug，是React useState的异步更新机制导致的：

React的状态更新是异步批量处理的，调用setCustomers后，组件不会立刻重新渲染，当前函数作用域里的customers变量还是更新前的旧值，所以你紧接着打印肯定是空数组。
不管是直接传值setCustomers(response.data.customers)，还是用函数式更新setCustomers(prev => [...prev, ...data])，本质都是异步的。函数式更新只是用来确保基于最新的前一次状态更新，但不改变异步的特性。

解决方法：

直接打印要设置的新值：如果只是想确认数据正确性，直接打印response.data.customers就行，这就是你要存入状态的内容。
用useEffect监听状态变化：如果需要在状态更新后执行逻辑（比如打印、处理数据），给useEffect加上customers依赖：

const [customers, setCustomers] = useState([]);

useEffect(() => {
  const storedToken = JSON.parse(localStorage.getItem("token"));
  const fetchCustomers = async () => {
    const config = {
      headers: { Authorization: `Bearer ${storedToken}` }
    };
    const response = await axios.get('https://exampleofalink.com/api/v1/customer', config);

    console.log("接口返回的数据:", response.data);
    setCustomers(response.data.customers);
  };
  fetchCustomers();
}, []);

// 监听customers变化，状态更新后执行
useEffect(() => {
  console.log("更新后的customers:", customers);
  // 这里可以写需要用到最新customers的逻辑
}, [customers]);