Tengo una página y esa página tiene dos componentes. Estoy obteniendo los datos del componente raíz y pasando datos al componente secundario usando react-redux . Traté de establecer los datos obtenidos en una variable de estado que está en el componente secundario, pero establece los datos antes de que se complete la recuperación en el componente raíz. Entonces, obtengo un objeto en blanco.
// child component const [myData, setMyData] = useState<any>(null); const data = useSelector((state: { value: any }) => state.value); useEffect(() => { setMyData(data); }, []); // parent component const dispatch = useDispatch(); useEffect(() => { fetch(url) .then((response) => response.json()) .then((data) => { dispatch(setData(data)); }); }, []);Puede consultar todo el código base: https://github.com/Sadiq1029/weather
¿Alguien puede ayudar?
Verifique si data no son nulos y luego actualice el estado de su hijo
useEffect(() => { if (data) setMyData(data); }, [data ]);datos.ts
import { createSlice, createSelector } from "@reduxjs/toolkit"; export const dataSlice = createSlice({ name: "data", initialState: { value: null }, reducers: { setData: (state, action) => { state.value = action.payload; }, }, }); export const { setData } = dataSlice.actions; const selectDataSlice = (state: any) => state.data export const selectValue = createSelector(selectDataSlice, (state) => state.value) export default dataSlice.reducer;Fondo.tsx
import { Container, Flex, Text } from "@chakra-ui/react"; import type { NextPage } from "next"; import { useEffect, useState } from "react"; import { useSelector } from "react-redux"; import { selectValue } from "../../states/data"; const Background: NextPage = () => { const [myData, setMyData] = useState<any>(null); const data = useSelector(selectValue); useEffect(() => { if (data) { setMyData(data); } }, [data]); return ( <Flex minW="100vw" minH="100vh" alignItems="flex-end" style={{ background: `url('/images/background.jpg') center no-repeat`, backgroundSize: "cover", }} > <Flex id="stats" m="8" flexDirection="column" color="white"> <Text fontSize="xl" fontWeight="hairline"> {myData ? myData.name : ""} {/* {data ? data.name : "hi"}, {data ? data.sys.country : "_"} */} </Text> <Text fontWeight="bold" fontSize="8xl"> {/* {data ? Math.round(data.main.temp) : "0"}°C */} </Text> {/* <Text>{data ? data.weather[0].main : ""}</Text> */} </Flex> </Flex> ); }; export default Background;