javascript - 为什么我的 react 查询请求数据不会显示？

Question

这是我第一次使用react-query，并且我从API请求数据时遇到问题。

这是代码:

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import "./App.css";

function App() {

  const fetchData = async () =>{
    const { data } = await axios.get("https://api.jikan.moe/v4/anime");
    const response = data.data;
    return response
  }

  const { isLoading,data,isError } = useQuery(
    ["posts"],
    fetchData,
      {
        retry: false,
        refreshInterval: 0,
        staleTime: 0
      }
  );
  if (isLoading) return <h1>...Loading</h1>;
  if (isError) return <h1>Fail</h1>;
    
  console.log(data)

  return (
    <div className="App">
      {data.map((datas)=>{
        <div>
          {datas.title}
        </div>
      })}
    </div>
  );
}

export default App;

当我 console.log(data) 时，它确实显示了 25 个对象元素的数据数组列表。 但是，当我尝试使用 data.map 显示网站中的数据时，什么也没有出现，但如果我只尝试显示数组之一，它就会出现，例如

{data[0].title}

数据确实出现了，但是当我尝试使用 data.map 显示所有数组元素时，但似乎没有出现任何内容。有人可以帮助我吗？

Answer 1

the data does appear but when I try the show all array element with data.map but nothing seems to appear. Can someone help me?

您的Array#map不会返回任何内容。

 {data.map((datas) => {
    return ( // return the JSX
      <div>
        {datas.title}
      </div>
    );
 })}