React中无法更新含Min/Max值的数组问题求助

我正在编写一段需要获取Min和Max值的代码，实际场景会调用SDK的两个Promise接口获取这两个值，以下是模拟逻辑的示例代码，用React Context存储值。

Context代码 #

import React, { useState } from "react";
import { useContext } from "react";

const ProductsContext = React.createContext();

export const ProductsProvider = ({ children }) => {
  const [priceValues, setPriceValues] = useState([0, 0]);
  return (
    <ProductsContext.Provider
      value={{
        priceValues,
        setPriceValues
      }}
    >
      {children}
    </ProductsContext.Provider>
  );
};
export const useProductsContext = () => {
  return useContext(ProductsContext);
};

业务代码 #

import { useEffect } from "react";
import { PriceRange } from "./PriceRange";
import { useProductsContext } from "./ProductsContext";

const ShowRange = () => {
  const { priceValues, setPriceValues } = useProductsContext();

  const getMinVal = () => {
    setPriceValues([Math.random() * 100, priceValues[1]]);
  };

  const getMaxVal = () => {
    setPriceValues([priceValues[0], Math.random() * 100]);
  };

  useEffect(() => {
    getMinVal();
    getMaxVal();
  }, []);

  console.log(JSON.stringify(priceValues));
  return <> {priceValues[0] && priceValues[1] && <PriceRange />} </>;
};

export default ShowRange;

目前运行代码后，priceValues始终是[0, randomNumber]，只有第二个值完成更新，第一个值没有变化，请问问题出在哪里？

问题原因 #

这是因为useState的更新是异步且批量执行的，同时你在getMinVal和getMaxVal中都依赖了当前的priceValues状态，但这两个函数在同一个useEffect中同步调用时，拿到的都是初始的priceValues（即[0,0]）：

• 调用getMinVal时，priceValues[1]是0，设置的数组为[随机数, 0]，但这个更新还未生效；
• 紧接着调用getMaxVal，此时priceValues[0]还是初始的0，设置的数组为[0, 随机数]，这个更新直接覆盖了之前的操作，最终只保留了第二个值的变化。

解决方法 #

方案1：使用函数式更新（推荐） #

useState的setter支持传入函数，函数参数是当前最新的状态，能确保每次更新都基于最新值：

const getMinVal = () => {
  setPriceValues(prev => [Math.random() * 100, prev[1]]);
};

const getMaxVal = () => {
  setPriceValues(prev => [prev[0], Math.random() * 100]);
};

不管两个函数调用顺序如何，每次更新都会基于上一次的最新状态，不会出现覆盖问题。

方案2：合并单次更新 #

如果两个值可以同时获取，可合并成一次setState调用，避免多次更新冲突：

useEffect(() => {
  const min = Math.random() * 100;
  const max = Math.random() * 100;
  setPriceValues([min, max]);
}, []);

这种方式更适合实际场景中等待两个Promise接口都返回后再更新的情况，比如用Promise.all：

useEffect(() => {
  const fetchPriceRange = async () => {
    const [minRes, maxRes] = await Promise.all([
      fetchMinPrice(), // SDK获取Min的Promise接口
      fetchMaxPrice()  // SDK获取Max的Promise接口
    ]);
    setPriceValues([minRes.data, maxRes.data]);
  };
  fetchPriceRange();
}, []);

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