Estoy tratando de usar ganchos de reacción para un problema simple. Creo que la solución es estúpida pero no la veo. Traté de ver en mi paquete.json pero no encontré la solución. y estoy bastante seguro de que estoy declarando mi estado en el buen sentido.
import React, { useEffect } from "react"; import "./App.css"; import Chuck from "./gettyimages-83457444-612x612.jpg"; import axios from "axios"; function App() { const [state, setState] = useState({ joke: "", }); useEffect(() => { fetchData(); }, []); const fetchData = async () => { const result = await axios.get("https://api.chucknorris.io/jokes/random"); console.log(result.data.value); setState({ ...state, joke: result.data.value }); }; return ( <div className="container"> <div className="row"> <div className="col-6"> <h1 className="title">Chuck API</h1> <img src={Chuck} alt="ChuckNoris" /> </div> <div className="col-6 searchJokeCol"> <div className="card"> <div className="card-header"> <span>Search for the Phrase of Chuck</span> </div> <div className="card-body"> <input type="text"></input> </div> </div> <div> <button className="btn btn-warning btn-lg">Just CLICK!</button> </div> </div> </div> <h2 className="subTitle"> Here is The joke</h2> <h4>{state.joke}</h4> </div> ); } export default App; "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "axios": "^0.20.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.3", "react-test-renderer": "^17.0.0-rc.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "ejLínea 7:29: 'useState' no está definido no undef
cree un nuevo archivo, "StateProvider.js", con este contenido:
import react, { createContext, useContext, useReducer } from "react"; export const StateContext = createContext(); export const StateProvider = ({ reducer, initialState, children }) => ( <StateContext.Provider value={useReducer(reducer, initialState)}> {children} </StateContext.Provider> ); export const useStateValue = () => useContext(StateContext);y úsalo en tu código:
import {useStateValue} from "./StateProvider"Necesitas importar "useState":
import React, { useEffect, useState } from "react";Ha olvidado importar useState
import React, { useEffect, useState } from "react";Veo que te has perdido la importación de useState.
O necesitas agregar como
import React, { useEffect, useState } from "react"; o React.useState es decir
const [state, setState] = React.useState({ joke: "", });