如何在 MERN Stack 的前端部分显示响应数据？答案

【问题标题】：How to display response data in my frontend part in MERN stack?如何在 MERN Stack 的前端部分显示响应数据？
【发布时间】：2022-01-08 15:54:15
【问题描述】：

我正在尝试创建一个简单的 CRUD MERN 应用程序，在此应用程序中，数据显示在我的控制台中，但我想在我的 UI 部分中显示它。请告诉我如何在我们的前端显示控制台部分。

Please Check console data

AllUser.js

这是 Alluser.js 文件，我想在其中显示来自后端的控制台数据

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { getUsers } from "./api";

const UserData = () => {
  const [users, setUser] = useState([]);

  useEffect(() => {
    AllUsers();
  }, []);

  const AllUsers = async () => {
    const response = await getUsers();
    console.log(response.data);
    setUser(response.data);
  };

  return (
    <div>
      <div className="container">
        <table className="table table-hover table-bordered mt-3">
          <thead>
            <tr>
              <th scope="col">No</th>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Phone</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            {users.map((index,user) => {
              <tr key={index}>
                <th scope="row">{user.id}</th>
                <td>{user.email}</td>
                <td>{user.name}</td>
                <td>{user.phone}</td>
   
              </tr>;
            })}

           
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default UserData;

【问题讨论】：

标签： node.js reactjs mongodb express

【解决方案1】：

{users.map((user,index) => {
              <tr key={index}>
                <th scope="row">{user.id}</th>
                <td>{user.email}</td>
                <td>{user.name}</td>
                <td>{user.phone}</td>
   
              </tr>;
            })}

地图函数有两个参数，第一个是你的元素

【讨论】：

【解决方案2】：

当你映射一个值数组时，应该保持映射函数的参数顺序，即

map((user) => { ... })
map((user, index) => { ... })
map((user, index, array) => { ... })

在您的代码中，您在 user 参数之前提到了 index 参数，当您尝试访问用户时，它将为您提供undefined。[anything]。

如果你改变用户和索引的顺序，它应该可以工作。

另外，关于代码的一些免费建议：使用索引作为键并不是官方文档中提到的最佳方法之一，您可以阅读更多关于它的信息here

【讨论】：

【解决方案3】：

由于您的 map 部分，它没有显示。尝试这样做：

  {users.map((user, index) => (
      <tr key={index}>
        <th scope="row">{user.id}</th>
        <td>{user.email}</td>
        <td>{user.name}</td>
        <td>{user.phone}</td>
      </tr>;
  ))}

【讨论】：