我正在嘗試創建一個簡單的 CRUD MERN 應用程式，在此應用程式中，資料顯示在我的控制臺中，但我想將其顯示在我的 UI 部分中。請告訴我如何在我們的前端顯示控制臺部分。
請檢查控制臺資料
所有用戶.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;
uj5u.com熱心網友回復：
它沒有顯示，因為你的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>;
))}uj5u.com熱心網友回復：
{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>;
})}
map 函式有 2 個引數，第一個是你的元素
uj5u.com熱心網友回復：
當您在一組值上進行映射時，應該保持映射函式的引數順序，即
map((user) => { ... })
map((user, index) => { ... })
map((user, index, array) => { ... })
在您的代碼中，您在 user 引數之前提到了 index 引數，undefined當您嘗試訪問 user.[anything] 時，該引數會給您。
如果您更改用戶和索引的順序，它應該可以作業。
此外，關于代碼的一些免費建議：使用索引作為鍵并不是官方檔案中提到的最佳方法之一，您可以在此處閱讀更多相關資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/371483.html