如何在React中的对象数组上使用map函数

Question

完成了使用fetchAPI读取数据的必要操作后，由于数组的性质，我在显示内容时遇到了问题。

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

function Home() {
  const [userData, setUserData] = useState([]);

  async function getData() {
    let response = await fetch("https://api.xxxxxxxx.io/something/students");
    let data = await response.json();
    return data;
  }

  //call getData function
  getData().then((data) => console.log(data)); //
  useEffect(() => {
    getData()
      .then((data) => {
        setUserData(data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      {Object.keys(userData).map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

export default Home;

当我检查控制台时，将显示数据，但仅显示学生，而未显示其他数据。 我有下面的数据。

Answer 1

尝试以下更改：

const [userData, setUserData] = useState({ students: [] });

...

return (
    <div>
      {userData.students.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );