使用 API 在 React Component 中发布渲染列表

Question

下面的代码是我用来根据从 link 获得的内容显示 post 的标题的组件。 API 的所有内容似乎都运行良好，但我没有得到为 posts.forEach(post => <li id={post.id}> {post.title} </li> 呈现的列表。任何人都知道如何将 post 标题呈现为数组 post 中的列表，我从 API 获得？感谢您的帮助，如果您需要更多信息，请告诉我。

import React, { useState, useEffect } from "react";
import axios from "axios";

const DataFetch = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        setPosts(res.data);
        console.log(posts[0].title);
      })
      .catch((err) => console.log(err));
  }, []);

  return <ul>
    {  posts.forEach(post => <li id={post.id}> {post.title} </li> )}
  </ul>
};

export default DataFetch;

Answer 1

Array.prototype.forEach 是空的 return。你想将 posts 映射到 JSX。不要忘记映射 React 键。

posts.map(post => (
  <li key={post.id} id={post.id}>
    {post.title}
  </li>
))

使用 API 在 React Component 中发布渲染列表

Issue rendering list in React Component using API

reactjs

react-hooks