调用对象的属性返回对象而不是属性

Question

这个标题确实令人困惑，但那是因为我几乎不明白发生了什么足以描述它。

我有一个 react 应用程序，它假设列出火星探测器使用 NASA API 在 sol 1000 上拍摄的前 5 张照片。

API 以 Object{photos[0-999].img_src} 格式返回一个对象。我对 object.photos 进行切片以创建一个新对象（或数组，不确定），该对象由对象中 photos 数组的前 5 个项目组成，但每个项目本身都是一个包含有关图像的各种数据的对象，当所有 i需要的是图片的url。

为了获取 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

Answer 1

您应该使用temp，如下所示。

<img src={temp} alt="" />

不是{{temp}}