0
108
VistasReaccionar contexto - estado no verdadero
Estoy haciendo un proyecto y me quedé atascado en el archivo de contexto. Quiero que mi planet estatal sea verdadero para poder usarlo en mi archivo de componentes. Al principio se vuelve verdadero mostrando el índice derecho de la matriz, pero al final se vuelve indefinido. ¿Alguien puede señalarme qué está causando que el estado del "planeta" no esté definido al final? Estoy hablando de la declaración if - if (planet) {...} . Estoy adjuntando el código del archivo de contexto y la pantalla de la consola de mi navegador. Sería bueno si alguien también me dijera si puedo cambiar el estado en su propia función de configuración, por ejemplo, setPlanets(planet[0]) .
import React from "react"; import { useState, useEffect } from "react"; export const Context = React.createContext({ onChooseMoon: () => {}, onChooseMars: () => {}, }); const ContextProvider = (props) => { const [planet, setPlanets] = useState(); useEffect(() => { fetch("./data.json") .then((response) => { return response.json(); }) .then((data) => { const transformedData = data.destinations.map((destination) => { return { name: destination.name, img: destination.images.png, desc: destination.description, dist: destination.distance, travel: destination.travel, }; }); setPlanets(transformedData); }); }, []); if (planet) { setPlanets(planet[0]); console.log(planet[0]); console.log("hello"); } const setMoonHandler = () => { setPlanets(planet[0]); }; const setMarsHandler = () => { setPlanets(planet[1]); }; return ( <Context.Provider value={{ planet: planet, onChooseMoon: setMoonHandler, onChooseMars: setMarsHandler, }} > {props.children} </Context.Provider> ); }; export default ContextProvider; 
1 Respuestas
Responde la pregunta0
Aquí hay un desglose de lo que está pasando:
- El componente se monta, el valor del
planetno estáundefined, se activauseEffect. CuandouseEffectejecutasetPlanets(transformedData), se activa la repetición. - El valor del
planetahora es lo que haya sidotransformedData(supongo que una matriz de objetos del planeta). Dadoplanetes verdadero,setPlanets(planet[0])se ejecuta, provocando una nueva representación. - El valor del
planetes ahora lo quetransformedData[0](un solo planeta). Dadoplanetsigue siendo verdadero,setPlanets(planet[0])se ejecuta de nuevo, provocando una nueva representación. - El valor del
planetahora es lo que seatransformedData[0][0]. Dado quetransformedData[0]no era una matriz y probablemente no tenga la clave0, el valor deplanetahora no estáundefinednuevamente.
El problema es que si alguna vez se define un planet , la ejecución de setPlanet(planet[0]) se ejecutará hasta que el valor del planet vuelva a estar undefined .
Creo que lo que pretendías hacer (a juzgar por el nombre) era tener dos variables de estado separadas. Uno para contener todos los planetas y otro para contener un solo planeta (activo/enfocado).
Aquí hay un ejemplo:
const ContextProvider = (props) => { const [activePlanet, setActivePlanet] = useState(); const [planets, setPlanets] = useState([]); useEffect(() => { fetch("./data.json") // same as before }, []); useEffect(() => { if (!activePlanet && planets.length > 0) { setActivePlanet(planets[0]); console.log(planets[0]); console.log("hello"); } }, [activePlanet, planets]); // ... }; Además, generalmente es una buena idea envolver toda la lógica de actualización de estado en enlaces (o vinculados a eventos como clics), por lo que agregué un useEffect para envolver la llamada setActivePlanet .