Estoy tratando de mostrar en una aplicación de reacción de una sola página, los íconos de los elementos, pero como respuesta de la búsqueda, en lugar de obtener una matriz de objetos, obtengo solo un objeto, que no tiene los datos de mi db. json
Mi pregunta es: ¿Cómo puedo llegar al "displayIcon" si no puedo obtener una respuesta correcta?
Aquí está mi función, y debajo de db.json:
const [weapons, setWeapons] = useState(null); useEffect(() => { console.log('effect triggered'); fetch('http://localhost:3001/data/', { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }) .then((res) => res.json()) .then((data) => setWeapons(data)); }, []); console.log('render', weapons) "data": [ { "uuid": "1", "displayName": "Odin", "category": "EEquippableCategory::Heavy", "defaultSkinUuid": "f454efd1-49cb-372f-7096-d394df615308", "displayIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/displayicon.png", "killStreamIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/killstreamicon.png", "assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/HMG/HMGPrimaryAsset", }, { "uuid": "2", "displayName": "Ares", "category": "EEquippableCategory::Heavy", "defaultSkinUuid": "5305d9c4-4f46-fbf4-9e9a-dea772c263b5", "displayIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/displayicon.png", "killStreamIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/killstreamicon.png", "assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/LMG/LMGPrimaryAsset", }Si está intentando renderizar una sola imagen, puede obtener el elemento mediante uuid y renderizar la imagen (o cualquier otra cosa).
Aquí hay un componente de ejemplo que accede al arma con uuid de 2. En su aplicación, probablemente quiera pasar uuid a este componente usando accesorios, pero se aplicará la misma lógica. texto fuerte
// get weapon by uuid const ShowIcon = () => { let weapons = { "data": [ { "uuid": "1", "displayName": "Odin", "category": "EEquippableCategory::Heavy", "defaultSkinUuid": "f454efd1-49cb-372f-7096-d394df615308", "displayIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/displayicon.png", "killStreamIcon": "https://media.valorant-api.com/weapons/63e6c2b6-4a8e-869c-3d4c-e38355226584/killstreamicon.png", "assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/HMG/HMGPrimaryAsset", }, { "uuid": "2", "displayName": "Ares", "category": "EEquippableCategory::Heavy", "defaultSkinUuid": "5305d9c4-4f46-fbf4-9e9a-dea772c263b5", "displayIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/displayicon.png", "killStreamIcon": "https://media.valorant-api.com/weapons/55d8a0f4-4274-ca67-fe2c-06ab45efdf58/killstreamicon.png", "assetPath": "ShooterGame/Content/Equippables/Guns/HvyMachineGuns/LMG/LMGPrimaryAsset", } ] } let weapon = weapons.data.filter(i => i.uuid == 2 ? 1 : 0); return( <div> <img src={weapon[0].displayIcon} /> </div> ); } ReactDOM.render(<ShowIcon />, document.getElementById('icon')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="icon"></div>