Tengo el siguiente código y tengo un problema al llamar a la API usando usecontext en reaccionar. Guíame para solucionarlo.
https://codesandbox.io/s/serene-williamson-bbik6?file=/src/App.js
import ReactDOM from "react-dom"; import "./styles.css"; const JediContext = React.createContext(); function Display() { const value = useContext(JediContext); return <div>{value.total}, I am your Father.</div>; } function App() { const [data, setData] = useState(0); fetch("https://api.npms.io/v2/search?q=react") .then((response) => response.json()) .then((rawData) => { console.log(data); setData(rawData); }); return ( <JediContext.Provider value={data.total}> <Display /> </JediContext.Provider> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);Hay algunos problemas con el código publicado:
total en el componente Display , mientras pasa data.total en JediContext.Provider . Creo que tenía la intención de pasar solo data .fetch se ejecuta con cada renderizado, por lo que su página se vuelve a renderizar ya que está setData(rawData) después de que se realiza la fetch . Esto provocará un bucle infinito y bloqueará la aplicación. Es una práctica común (en este momento) usar useEffect para obtener datos. En el futuro, el suspense 1 podría usarse para este propósito, pero eso es experimental ahora.JediContext no tenía un valor predeterminado. Entonces value.total produce una excepción de puntero nulo. Para proporcionar un valor predeterminado al contexto, const JediContext = React.createContext(/*provide default value here*/); const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); en su index.js . En App.js , solo necesita exportar la App como una función predeterminada.
Aquí hay una versión de su código que funciona en Codesand box: https://codesandbox.io/s/infallible-worker-bcix4?file=/src/App.js