获取数据显示在控制台中，但我无法让它显示在我的网站上-react.js

Question

我正在尝试在我的网站上显示电影数据库中的电影图像和电影标题以供浏览。我对 React 没有太多经验，不确定我做错了什么，或者需要更改什么才能让数据显示在网站上。

我正在使用 fetch 和 useState。提取必须正常工作，如控制台中所示。

function App() {
  const [data, setData] = useState([])

  let url = 'https://moviesdatabase.p.rapidapi.com/titles';

  function apiGet() { 

  const fetchData = fetch(url, { method: 'Get', headers: {
    'X-RapidAPI-Key': '',
    'X-RapidAPI-Host': 'moviesdatabase.p.rapidapi.com'
  }})
    .then((res) => res.json())
    .then((json) => {
      console.log(json);
      setData(json);
    });
  };

return (

<>
    My API <br/>
    <button onClick={apiGet}>Fetch API</button>
    <br />

    <div>
        {[data].map((item) => {
          return (
                <img key= "{item.id}" src={item.primaryImage} />

          )
})}
    </div>
    </>
  )
}

我删除了 api 密钥来分享这个。

Answer 1

所以根据你的状态，

data

预计是一个数组。因此，如果您的 API 请求返回一个数组，您可以直接在 JSX 中迭代它：

<div>
  {data.map((item) => (
    <img key={item.id} src={item.primaryImage} />
  ))}
</div>

另外，请注意，在您的代码中，

key="{item.id}"

用引号引起来，使其成为字符串文字。结果，相同的键将被分配给所有图像。