React中如何在SetState内结合async/await正确获取数据？

我在调用React的setState时，需要在其内部通过async/await获取数据，但直接在setState的更新函数里没法实现这个逻辑。另外我没办法在调用setState之前就获取数据，因为只有当newValue满足特定条件时才需要发起请求，所以必须在setState内部执行数据获取操作。

原代码示例 #

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  const [value, setValue] = useState([]);

  const run = async () => {
    setValue((oldValue) => {
      const newValue = [...oldValue];
      // do something makes newValue changes
      if (newValue == true) { // if newValue satisfy a condition
      const res = fetch(`https://fakestoreapi.com/products/${newValue.length}`);
      const result = res.json();
      newValue.push(result.title);
      }
      return newValue;
    });
  };

  return (
    <div className="App">
      <button onClick={run}>get result</button>
      {value.map((item, index) => {
        return <h2 key={index}>{value[index]}</h2>;
      })}
    </div>
  );
}

解决方案 #

首先明确：setState的更新函数是同步执行的，不能直接在内部编写异步逻辑——异步操作完成时，更新函数已经执行完毕并返回了新状态，无法再修改当时的newValue。针对你的场景，推荐以下两种可行方案：

方案一：拆分逻辑，先计算基础状态再判断请求

先基于旧状态计算出基础的newValue，判断是否满足请求条件后，分情况处理：

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState([]);

  const run = async () => {
    // 先计算基础的newValue（不包含异步数据）
    const baseNewValue = [...value];
    // 这里模拟你对newValue的修改逻辑，比如先添加占位或做其他操作
    // baseNewValue.push('temp');

    // 判断是否满足请求条件（替换成你实际的判断逻辑）
    const needFetch = baseNewValue.length >= 0;

    if (!needFetch) {
      // 不需要请求，直接更新基础状态
      setValue(baseNewValue);
      return;
    }

    // 需要请求，发起异步请求并合并结果
    try {
      const res = await fetch(`https://fakestoreapi.com/products/${baseNewValue.length + 1}`);
      const result = await res.json();
      setValue([...baseNewValue, result.title]);
    } catch (err) {
      console.error('请求失败:', err);
      // 可添加错误处理逻辑，比如提示用户或回滚状态
    }
  };

  return (
    <div className="App">
      <button onClick={run}>get result</button>
      {value.map((item, index) => (
        <h2 key={index}>{item}</h2>
      ))}
    </div>
  );
}

这个方案把“状态计算”和“异步请求”拆解开，先拿到判断条件所需的baseNewValue，再决定是否发起请求，完全匹配你“仅当newValue满足条件才请求”的需求。

方案二：用useEffect监听状态变化触发请求

如果逻辑允许，也可以先更新基础状态，再通过useEffect监听状态变化，当状态满足条件时发起请求并追加数据：

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [value, setValue] = useState([]);

  const run = () => {
    // 先更新基础状态
    setValue(prev => [...prev]);
  };

  // 监听value变化，判断是否需要请求
  useEffect(() => {
    // 替换成实际判断条件，避免无限循环
    const needFetch = value.length >= 0;
    if (!needFetch) return;

    const fetchData = async () => {
      try {
        const res = await fetch(`https://fakestoreapi.com/products/${value.length}`);
        const result = await res.json();
        setValue(prev => [...prev, result.title]);
      } catch (err) {
        console.error('请求失败:', err);
      }
    };

    fetchData();
  }, [value]);

  return (
    <div className="App">
      <button onClick={run}>get result</button>
      {value.map((item, index) => (
        <h2 key={index}>{item}</h2>
      ))}
    </div>
  );
}

注意：使用该方案时必须严格控制useEffect的依赖和判断条件，避免因状态更新触发无限请求循环。

原代码的几个错误修正 #

1. 条件判断错误：if (newValue == true)中newValue是数组，永远不会等于true，需要改成实际的判断逻辑（比如数组长度、特定元素等）
2. 异步操作未加await：fetch和res.json()都是异步操作，必须用await才能拿到正确结果，否则会直接把Promise对象push到数组里

内容的提问来源于stack exchange，提问作者Nghĩa Phạm