function Header() { 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()); 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${key1}`)} className='modal_img'/> </div> ); } export default Header;'resultado' es un mapa, y estoy tratando de usar claves en el resultado.
(Porque las claves de resultado (mapa) son el número de imagen que estoy tratando de usar en la ruta img src. --> ex) img/img13.jpg)
Sé que tengo que usar el estado para pasar variables. Pero no sé cómo usar.
(Con el código anterior recibo este error--> 'clave' no está definida no-undef)
Usa este código:
import { useState } from "react"; function Header() { const [result , setResult] = useState({}) const first = (e) => { 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++){ setResult({...result, [content.data[i].image_id] :content.data[i].caption}) } var key = Array.from(result.keys()); 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${key1}`)} className='modal_img'/> </div> ); } export default Header;También debe leer los documentos useState Hook
function Header() { const [keys, setKeys] = useState([]); // defining a state using hook 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); // setting the state var value = Array.from(result.values()); }); } entonces, puedes usar las keys de estado para acceder al nombre de la imagen donde quieras
Puede encontrar más información sobre el gancho de estado aquí .