Context.Provider中setState不生效问题求助

核心问题：React状态更新是异步的，且你的代码存在渲染时重复执行更新的错误 #

1. 禁止在组件顶层直接调用状态更新函数

你现在在组件顶层直接执行editBusqueda(info)和getVuelos()，这会导致每次组件渲染都重复触发状态更新，不仅可能引发无限渲染循环，而且因为React状态更新是异步批量处理的，紧接着的console.log(busqueda)只能拿到当前渲染周期的旧值，永远看不到更新后的结果。

正确做法是把初始化逻辑放到useEffect中：

const { busqueda, editBusqueda, vuelosArray, editVuelos } = useContext(BusquedaContext);
const location = useLocation();
const info = location.state.info;

// 仅在组件挂载或info变化时执行初始化
useEffect(() => {
  if (!info) return;
  
  editBusqueda(info);
  getVuelos();
}, [info, editBusqueda, getVuelos]);

const getVuelos = async () => {
  const res = await axios.get(
    `${URI_vuelos}codvuelo/${info.originCity}/${info.destinationCity}/${info.dateIn}/${info.dateOut}`
  );
  editVuelos(res.data);
};

2. 不要期望调用setState后立即拿到新值

React的useState更新函数是异步批量更新的，调用后不会立刻修改状态变量，要等到下一次组件渲染时才会同步新值。

如果需要在状态更新后执行逻辑，有两种可靠方式：

• 用useEffect监听状态变化：

  useEffect(() => {
    // busqueda更新后自动执行这里的逻辑
    console.log("更新后的busqueda:", busqueda);
    // 比如根据新数据触发后续操作
  }, [busqueda]);
  

• 若新状态依赖旧状态，使用函数式更新获取最新值：

  // 在Provider里修改editBusqueda
  const editBusqueda = (data) => {
    setBusqueda(prevBusqueda => {
      const newBusqueda = {...prevBusqueda, ...data};
      // 这里可以拿到刚更新的状态
      console.log("新的busqueda:", newBusqueda);
      return newBusqueda;
    });
  };
  

3. 二次确认Provider的包裹范围

虽然你认为Provider结构没问题，但请确保所有需要使用BusquedaContext的组件都被BusquedaProvider包裹，比如根组件或路由入口：

function App() {
  return (
    <BusquedaProvider>
      {/* 所有依赖该Context的页面/组件都要放在Provider内部 */}
      <Routes>
        <Route path="/tu-ruta" element={<TuComponente />} />
      </Routes>
    </BusquedaProvider>
  );
}

额外优化：避免闭包陷阱

把getVuelos用useCallback包裹，确保useEffect能获取到最新的函数引用：

const getVuelos = useCallback(async () => {
  const res = await axios.get(
    `${URI_vuelos}codvuelo/${info.originCity}/${info.destinationCity}/${info.dateIn}/${info.dateOut}`
  );
  editVuelos(res.data);
}, [info, editVuelos]);

内容的提问来源于stack exchange，提问作者Bastián Núñez