React中数据在控制台显示但页面/DOM不渲染问题求助

我编写了如下代码，但遇到问题：数据可在控制台显示，但无法在页面或DOM中渲染。后端使用Node.js，我在另一个文件中使用完全相同的逻辑却能正常显示，尝试搜索资料但未找到答案。

Users组件代码 #

import axios from "axios";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import UserInfo from "../components/UserInfo";

const Users = () => {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    console.log("fetching users...");
    axios.get("http://localhost:4000/api/users").then((response) => {
      setUsers(response.data);
      console.log(response.data);
    });
  }, []);

  return (
    <div>
      <h1>Users:</h1>
      <ol>
        {users &&
          users.map((user) => {
            console.log(user.name);
            <li key={user._id} className="w-9/12 my-2">
              {user.name}
              <UserInfo user={user} full={false} />
              <Link>Update</Link> &nbsp;
              <Link>Delete</Link>
            </li>;
          })}
      </ol>
      <Link
        to="/signup"
        className="fixed top-5 right-5 bg-green-500 font-semibold hover:text-white py-2 px-4 border-black rounded"
      >
        Add user
      </Link>
    </div>
  );
};

export default Users;

UserInfo组件代码 #

import { useLocation } from "react-router-dom";

const UserInfo = ({ user }, full) => {
  let User = user;
  const location = useLocation();
  if (location.state) {
    User = location.state.user;
    full = true;
  }

  const { name, employee_id, pass } = Company;
  if (full === true) {
    return (
      <div className="text-center">
        <h2>Name:{name}</h2>
        <p>ID: {employee_id}</p>
        <p>Pass: {pass}</p>
      </div>
    );
  } else {
    return (
      <div className="border border-black min-w-min text-center overflow-x-auto hover:bg-blue-400 hover:text-white">
        <h2>Name: {name}</h2>
      </div>
    );
  }
};

export default UserInfo;

问题原因及修复方案 #

1. Users组件：map函数未返回JSX元素 #

你的users.map回调函数中，JSX元素<li>没有被返回。当使用大括号{}包裹回调逻辑时，必须显式使用return语句返回JSX；或者改用小括号()包裹，让箭头函数自动返回内容。

修复后代码片段：

{users &&
  users.map((user) => {
    console.log(user.name);
    // 显式return JSX元素
    return (
      <li key={user._id} className="w-9/12 my-2">
        {user.name}
        <UserInfo user={user} full={false} />
        <Link to={`/update/${user._id}`}>Update</Link> &nbsp;
        <Link to={`/delete/${user._id}`}>Delete</Link>
      </li>
    );
  })}

2. UserInfo组件：props解构错误 #

组件的full参数是props的一部分，不能作为第二个参数传递，需要和user一起在解构对象中获取。

修复后组件参数：

const UserInfo = ({ user, full }) => {

3. UserInfo组件：未定义的变量Company #

代码中使用了Company变量，但实际应该是你定义的User变量，这里属于变量名拼写错误。

修复后代码片段：

const { name, employee_id, pass } = User;

内容的提问来源于stack exchange，提问作者arnab shanta