React中用Axios获取MongoDB后端数据，状态更新但页面不显示

你的代码里有两个关键问题导致数据无法渲染：

• map函数未返回元素
  你在users.map里使用了带大括号的箭头函数，但没有显式返回<li>元素，JSX内容不会被识别并渲染。可以直接去掉大括号让箭头函数隐式返回，或者添加return语句。

• 属性名拼写错误
  代码里写的是user.emai，正确的属性名应该是user.email（少了字母l），导致无法读取到用户邮箱值。

修复后的代码如下：

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

function ApiTest() {
  const [users, setUsers] = useState([]);
  const fetchUsers = () => {
    axios
      .get("/api/users")
      .then((response) => {
        setUsers(response.data);
        console.log(response.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div>
      <button onClick={fetchUsers}>Fetch Users</button>
      <ul>
        {users.map((user) => (
          <li key={user._id}>{user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default ApiTest;

额外注意：

• 确认后端返回的用户对象中确实包含email字段，避免属性名不匹配
• MongoDB返回的_id作为列表key是合理的，确保每个用户的_id唯一即可

内容的提问来源于stack exchange，提问作者Qoussay El Akkari