Hola, comenzaré diciendo que soy bastante nuevo en React y en la codificación en general. Actualmente estoy revisando React Doc y aprendiendo. Lo siento si esto es trivial.
Tengo un código de problema aquí: https://pastebin.com/rkwS1x66 donde intento actualizar una tabla basada en un usuario que hace clic en un botón. Estoy seguro de que mi lógica es sólida hasta el renderizado real. Mi función de manejo de clics funciona bien y, al alternar, puede mostrar el cambio de URL a través de una alerta (). El problema es que, aunque la variable URL cambia, la tabla no se vuelve a representar. Quiero que la tabla se vuelva a representar esencialmente y muestre las diferentes llamadas a la API. Básicamente, debería mostrar la api SWAP o la api de Pokémon representada en la tabla de forma dinámica en función del clic del botón.
El enlace contiene mi código condensado. Mi proyecto contiene más código, pero pensé que esto sería suficiente para el problema en cuestión.
function HeaderSection() { let baseUrl = "https://swapi.dev/api/people"; const [data, setData] = useState([]); const [currentStatus , setStatus] = useState(false); let urlToggle = false; function urlChange(){ urlToggle = !urlToggle; if(urlToggle) { baseUrl = "https://swapi.dev/api/people"; } else { baseUrl = "https://pokeapi.co/api/v2/berry"; } } useEffect(()=>{ fetch(baseUrl) .then((response) =>{ if(!response.ok) { return Promise.reject( new Error("Response Error!")); } else { return response.json(); } }) .catch ( (err) =>{ console.log(err); }) .then((json) => { try{ setData(json.results); setStatus(true); } catch { return Promise.reject(new Error(`State Error!: Data: ${data} , Connection:${currentStatus}`)); } }) .catch((err) =>{ console.log(err); }) },[baseUrl]); return ( <div className='gio-main'> <div className='gio-container-3'> <h1>API Switch</h1> <h4>Endpoint request using vanilla JS displayed in custom table</h4> <p>You can switch between endpoints using this button!</p> <button onClick={urlChange}>Change API</button> {!currentStatus ? <h2>Loading... </h2> : <Table data={data}/>} </div> </div> ); } export default HeaderSection;La razón por la que su useEffect no se activa en baseUrl y cambia el valor de data como esperaba es que baseUrl no es un estado.
El segundo argumento, la lista de estados esperados de useEffect , y hará que useEffect se active en el cambio de estado, por lo que usar una variable "normal" no hará que se active el enlace.
Para solucionarlo, simplemente cambie baseUrl a useState . En tu código:
// change #1 const [baseUrl, setBaseUrl] = useState("https://swapi.dev/api/people"); //change #2 function urlChange(){ urlToggle = !urlToggle; if(urlToggle) { setBaseUrl("https://swapi.dev/api/people"); } else { setBaseUrl("https://pokeapi.co/api/v2/berry"); } } Y ahora, cuando baseUrl cambie, el useEffect se reactivará.
useEffect docs - mire la parte "nota"