为什么使用此代码获取的 API 数据没有显示在我的网站上？它显示在控制台中-react.js

Question

使用以下代码，我可以在控制台中看到我的数据，但屏幕上没有显示任何内容，并且控制台中没有错误。我认为我的映射返回存在问题，但不知道它是什么。

import { React, useState, useEffect } from "react";
import "./App.css";
import Card from "./Card";

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

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


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

  return (
    <>
    My API <br/>
    <br />

    <div>
        {data.length && data.results.map((item) => {
          <div key={item.id}>
                <Card
                image={item.primaryImage.url}
                title={item.titleText}
                />
                </div>

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

export default App

卡组件代码（如果需要）：

import React from "react";

function Card(props) {
    return (
        <>
        <img src={props.image} alt={props.title} />
        <p>{props.title}</p>
        </>
    )
}

export default Card

Answer 1

您的

App

组件内的映射函数似乎有一个小问题。

map

函数应该返回

JSX

，但您不会从

map

内的箭头函数返回任何内容。因此，屏幕上没有渲染任何内容。

这是映射函数的更正代码：

{data.length && data.results.map((item) => (
  <div key={item.id}>
    <Card
      image={item.primaryImage.url}
      title={item.titleText}
    />
  </div>
))}

通过使用括号

()

而不是大括号

{}

，您将隐式返回箭头函数内的

JSX

，并且它应该正确渲染

Card

组件。