React函数组件中如何在setOrders异步更新后执行后续计算？

下面给你几个实用的解决方案，适配你的场景：

方法一：在API请求完成后直接执行计算 #

既然你是在组件挂载时的useEffect里请求数据，那拿到API返回结果后，直接在同一个异步函数里完成计算即可，不用依赖setOrders的异步更新。逻辑更集中，还能避免初始渲染时触发计算。

const [orders, setOrders] = React.useState(getSomeIntialValuesToShowWhileFetching());
// 可选：如果需要把计算结果存在state里
const [totalAmount, setTotalAmount] = React.useState(0);

useEffect(() => {
  const fetchData = async () => {
    const res = await getDataFromApi();
    // 先更新订单数据
    setOrders(res);
    // 紧接着计算总额
    const calculatedTotal = res.reduce((sum, order) => sum + order.amount, 0);
    setTotalAmount(calculatedTotal);
    // 也可以直接执行其他操作，比如上报、弹窗提示等
  };
  fetchData();
}, []);

方法二：给依赖orders的useEffect加初始值判断 #

如果你必须通过监听orders变化来执行计算，可以先把初始值存为变量，在useEffect里判断当前orders是否是API返回的真实数据，而非初始占位值，再执行计算。

情况1：初始值是基本类型或可直接比较的引用类型 #

// 把初始值存成独立变量，方便后续判断
const initialOrders = getSomeIntialValuesToShowWhileFetching();
const [orders, setOrders] = React.useState(initialOrders);

useEffect(() => {
  const fetchData = async () => {
    const res = await getDataFromApi();
    setOrders(res);
  };
  fetchData();
}, []);

useEffect(() => {
  // 只有当orders不是初始值时，才执行计算
  if (orders !== initialOrders) {
    const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0);
    console.log('订单总额：', totalAmount);
  }
}, [orders, initialOrders]);

情况2：初始值是复杂引用类型（数组/对象） #

直接用!==判断会失效（引用地址不同），可以给初始值加标记字段，或者检查API返回数据的特有属性：

// 给初始占位数据加标记
const initialOrders = getSomeIntialValuesToShowWhileFetching().map(item => ({
  ...item,
  isPlaceholder: true
}));
const [orders, setOrders] = React.useState(initialOrders);

useEffect(() => {
  const fetchData = async () => {
    const res = await getDataFromApi();
    setOrders(res);
  };
  fetchData();
}, []);

useEffect(() => {
  // 判断是否存在占位标记，没有则执行计算
  const hasPlaceholder = orders.some(item => item.isPlaceholder);
  if (!hasPlaceholder) {
    const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0);
    console.log('订单总额：', totalAmount);
  }
}, [orders]);

方法三：用useRef标记API请求状态 #

用useRef存储一个布尔值，标记API是否已经请求完成，这样在监听orders的useEffect里，只有当请求完成后才执行计算：

const [orders, setOrders] = React.useState(getSomeIntialValuesToShowWhileFetching());
// 标记API是否已获取数据
const isApiFetched = React.useRef(false);

useEffect(() => {
  const fetchData = async () => {
    const res = await getDataFromApi();
    setOrders(res);
    // 请求完成后更新标记
    isApiFetched.current = true;
  };
  fetchData();
}, []);

useEffect(() => {
  // 只有API已请求完成，且orders有数据时执行计算
  if (isApiFetched.current && orders.length > 0) {
    const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0);
    console.log('订单总额：', totalAmount);
  }
}, [orders]);

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