Debido a la naturaleza de React con respecto al flujo de datos, solo puede pasar props del componente principal a sus hijos, esto se conoce como enlace de datos unidireccional o flujo de datos unidireccional. Según la estructura de sus componentes, para lograr lo que desea hacer, necesitaría usar Context API o algo así como redux para centralizar sus datos en un solo lugar (o simplemente elevar los estados). Sin embargo, puede probar esta "solución alternativa" para que no necesite modificar la estructura de su proyecto:

Dado que su estado está en la página de inicio/índice, puede definir una función en este componente que recibirá como parámetro los datos obtenidos en el componente Location y establecer el estado con estos datos, por supuesto, deberá pasar esta función a través de props . al componente Layout para que pueda pasarlo a Header y Header a Location (perforación de apoyo), ejemplo:

 const Home = () => { const [data, setData] = useState([]); const handleData = (data) => { setData(data); } return ( <Layout handleData={handleData}> The rest of your components... </Layout> ) }

Luego, como dije, pase esa función de esta manera: Diseño - Encabezado - Ubicación.

En Location :

 const Location = ({ handleData }) => { const handleClick = () => { // Fetch your data on click event and pass it as parameter to handleData function handleData(fetchedData); } // The rest of your component... }

Espero que esto te ayude.

Soluciones sugeridas basadas en una mayor complejidad

1. redux
2. API de contexto de reacción
3. levantando el estado

Código de muestra de estado de elevación (más fácil que otro)

1. Defina la función de envío y los datos meteorológicos como un estado en el componente de diseño, luego envíe la función de envío al componente de encabezado y luego al componente de ubicación como apoyo.

 const [weatherData,setWeatherData]=useState(); const shippingFunction = function(data) { setWeatherData(data);}

2. Componente de ubicación

   • Llame a props.shippingFunction en el componente Layout cuando se obtuvieron los datos meteorológicos, luego envíe los datos meteorológicos a props.shippingFunction como parámetro. Ahora tiene datos meteorológicos en el componente Diseño

3. Componente de diseño

   • En este momento, ha completado weatherData y puede pasarlo como accesorio a cualquier componente que desee