React/Next.js点击按钮跨组件获取数据的最优方案咨询

明确说：完全没必要用你提到的逐层props传递方式，这种“属性透传（props drilling）”在组件层级较深时不仅编写繁琐，后续维护成本也很高，绝对不是最优解。

更高效的两种处理方式： #

• React Context API
  在顶层组件（比如Layout或App）创建一个Context，把天气数据的状态和更新方法封装在Context中。Location组件通过Context提供的更新方法修改数据，需要展示数据的Display类组件直接从Context读取即可，无需逐层传递props。
  简单示例：

  import { createContext, useContext, useState } from 'react';
  
  // 定义天气数据结构
  type WeatherData = {
    temp: number;
    city: string;
    desc: string;
  };
  
  // 创建WeatherContext
  const WeatherContext = createContext<{
    weatherData: WeatherData | null;
    setWeatherData: (data: WeatherData | null) => void;
  }>({
    weatherData: null,
    setWeatherData: () => {},
  });
  
  // 在Layout组件中提供Context
  export function Layout() {
    const [weatherData, setWeatherData] = useState<WeatherData | null>(null);
  
    return (
      <WeatherContext.Provider value={{ weatherData, setWeatherData }}>
        <Header />
        <Home />
      </WeatherContext.Provider>
    );
  }
  
  // Location组件中触发数据更新
  export function Location() {
    const { setWeatherData } = useContext(WeatherContext);
  
    const fetchCurrentWeather = async () => {
      // 模拟获取天气数据的逻辑
      const res = await fetch('/api/weather');
      const data = await res.json();
      setWeatherData(data);
    };
  
    return <button onClick={fetchCurrentWeather}>获取当前位置天气</button>;
  }
  
  // Display组件中读取并展示数据
  export function Display1() {
    const { weatherData } = useContext(WeatherContext);
  
    return (
      <div className="display">
        {weatherData ? (
          <SubDisplay1 
            city={weatherData.city} 
            temp={weatherData.temp}
            desc={weatherData.desc}
          />
        ) : (
          <p>点击按钮获取天气数据</p>
        )}
      </div>
    );
  }
  

• 状态管理库
  如果项目规模较大，或存在其他跨组件的状态需要管理，直接用Zustand、Jotai或Redux这类状态管理库会更省心。以Zustand为例，只需创建一个全局状态store，Location组件更新store中的天气数据，其他组件直接从store读取即可，完全无需关心组件层级关系，代码更简洁易维护。

补充：什么时候适合逐层传递？ #

只有当组件层级特别浅（2-3层），且数据仅在这几个组件间流转时，逐层传props才是简单直接的选择，但你的场景里组件层级已不算浅，显然不适合这种方式。

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