function Header() { const [keys, setKeys] = useState([]); //added const first = (e) => { var result = new Map() axios.post('http://localhost:8000/' + query) .then(function(response){ var content=JSON.parse(JSON.stringify(response)).data for (var i=0;i<content.data.length;i++){ result.set(content.data[i].image_id, content.data[i].caption) } var key = Array.from(result.keys()); setKeys(key); //added var value = Array.from(result.values()); }).catch(err => { console.log("error"); alert(err); }); }; const second = () => {} return ( <div> <button onClick={(e)=> { first(); second(); }}/> <img src={require(`img/img${key[0]}.jpg`)}/> </div> ); } export default Header;Hice una pregunta aquí Usando estado con matriz, mapa / Cómo pasar variable y de las respuestas que obtuve, edité el código así. Sin embargo, sigo recibiendo este error --> 'clave' no está definida no undef
Pensé que tal vez tenía algo que ver con https://reactjs.org/docs/hooks-rules.html (Solo Call Hooks en el nivel superior). Pero no puedo entenderlo.
El problema es el error tipográfico.
Escribiste keys en lugar de key .
su código debe ser como:
const [keys, setKeys] = useState([]) <img src={require(`img/img${keys[0]}.jpg`)}/>Su variable de estado es keys , no clave. Si accede a la clave, obtendrá la clave no definida.
return ( <div> <button onClick={(e)=> { first(); second(); }}/> <img src={require(`img/img${keys[0]}.jpg`)}/> </div> );El problema no tiene nada que ver con lo que sospechabas.
const [keys, setKeys] = useState([]); //added <img src={require(`img/img${key[0]}.jpg`)}/> Ha definido el estado como keys , pero en su etiqueta img está accediendo a key[0] , por lo tanto, dice que la key no está definida