我已將 JSON 端點轉換為 JavaScript 陣列，并通過它進行映射以獲取所需的鍵值。4 個中有 3 個是文本值，但第一個是影像，它只顯示 URL 鏈接。我試圖通過相同的陣列進行映射并僅顯示影像并且它可以作業，但是我無法將兩個元素合并為一個 div。
代碼：
export default function Pokes() {
const [pokemonData, setPokemonData] = React.useState({});
React.useEffect(() => {
fetch(
"https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"
)
.then((res) => res.json())
.then((data) => setPokemonData(data.pokemon));
}, []);
const allPokes = pokemonData;
const pokemons = Object.values(allPokes);
const pokesData = pokemons.map(pokemon => `${pokemon.img} ${pokemon.num} ${pokemon.name} ${pokemon.type}`);
let renderedOutput = pokesData.map(item => <div className="infodiv" style={{ flex: 1, flexBasis: "33%" }}> {item} </div>)
return (
<main>
<div>
<div style={{ display: "flex", flexWrap: "wrap" }}>{renderedOutput}</div>
</div>
</main>
);
}
uj5u.com熱心網友回復：
const pokesData = pokemons.map(pokemon => `${pokemon.img} ${pokemon.num} ${pokemon.name} ${pokemon.type}`)
這行代碼將回傳“影像網址編號名稱”，您真正想要的是需要使用imgHTML 標簽的真實影像。用你的代碼實作這個，它會變成：
export default function Pokes() {
const [pokemonData, setPokemonData] = React.useState({});
React.useEffect(() => {
fetch(
"https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"
)
.then((res) => res.json())
.then((data) => setPokemonData(data.pokemon));
}, []);
const allPokes = pokemonData;
const pokemons = Object.values(allPokes);
let renderedOutput = pokemons.map(pokemon => <div className="infodiv" style={{ flex: 1, flexBasis: "33%" }}> <img src={pokemon.img} /> {pokemon.num} {pokemon.name} </div>)
// Note the code change above ^^^
return (
<main>
<div>
<div style={{ display: "flex", flexWrap: "wrap" }}>{renderedOutput}</div>
</div>
</main>
);
}
uj5u.com熱心網友回復：
<img src={{item.img}} alt="Lamp" width="100" height="100">uj5u.com熱心網友回復：
如果這是您正在尋找的解決方案，這里是解決方案。這是以下代碼的代碼和框；
import { useState, useEffect, useCallback } from "react";
import axios from "axios";
const URI =
"https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json";
const App = () => {
const [values, setValues] = useState([]);
const getPokomonGo = useCallback(async () => {
try {
const { data } = await axios.get(URI);
if (data) setValues(data?.pokemon);
} catch (err) {
console.log({ err });
}
}, []);
useEffect(() => {
getPokomonGo();
}, [getPokomonGo]);
return (
<div className="App">
<h1>Pokemon Images</h1>
{values &&
values.map(({ num, name, img }) => (
<img src={img} alt={name} key={num} />
))}
</div>
);
};
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/387525.html
標籤：javascript 数组 反应 json 反应钩子
上一篇：PHP從嵌套陣列中獲取值