誠然，這個標題令人困惑，但那是因為我幾乎不明白發生了什么足以描述它。
我有一個反應應用程式，它應該列出火星探測器使用 NASA API 在 sol 1000 上拍攝的前 5 張照片。
API以Object{photos[0-999].img_src}格式回傳一個物件。我切片 object.photos 以創建一個新物件（或陣列，不確定），由物件內照片陣列的前 5 個專案組成，但每個專案本身都是一個包含有關影像的各種資料的物件，當所有我需要的是圖片網址。
為了獲取 url，我使用 .map 方法創建一個新陣列并將每個專案的 url 分配給它。
最后，我再次使用 .map 方法通過將 url 插入影像源來顯示每個影像。
但是，檢查器工具如何使每個元素源不是 url 字串，而是全部為“[object Object]”。
我不知道發生了什么，為什么會發生，或者如何阻止它。任何人都可以闡明這一點嗎？
import "./App.css"
import { useState } from "react"
const App = () => {
const [data, setData] = useState([])
const handleFetch = async () => {
const response = await fetch(`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=${process.env.REACT_APP_NASA_KEY}`, {
method: "GET",
})
const fetchData = await response.json()
const fetchData2 = fetchData.photos.slice(0,5)
setData(fetchData2.map(arrayItem => {
return arrayItem.img_src
}))
}
return (
<div className="App">
<h1>Mars rover images</h1>
<button onClick={handleFetch}>Click me</button>
<ol>
{data &&
data.map((temp, index) => {
return (
<li key={index}>
<img src={{temp}} alt="" />
</li>
)
})}
</ol>
</div>
)
}
export default App
uj5u.com熱心網友回復：
你應該temp像下面這樣使用。
<img src={temp} alt="" />
不是 {{temp}}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/390097.html