.map 不是 React Js 中的函数

Question

我使用 MERN 堆栈创建一个页面来显示体育俱乐部的成员。我将在下面提到该代码。在浏览器中，将错误显示为“members.map is not a function”。我想解决该错误...................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ...................................................... ................................

import React, { useEffect, useState } from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../../css/Admin.css';
import AdminNavbar from './AdminNavbar';
import axios from 'axios';

function MemberDashboard() {
  const [members, setMembers] = useState([]); 
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://localhost:8000/posts');
        setMembers(response.data);
      } catch (error) {
        console.error('Error fetching members:', error.message);
      }
    };

    fetchData();
    function simulateNetworkRequest() {
      return new Promise((resolve) => setTimeout(resolve, 2000));
    }

    if (isLoading) {
      simulateNetworkRequest().then(() => {
        setLoading(false);
      });
    }
  }, [isLoading]);

  

  const handleActionClick = () => setLoading(true);

    

  return (
    <div>
      <div className='navshadow'>
        <AdminNavbar />
      </div>
      <h1>Members of Sports Club</h1><br />
      <table className="members">
        <thead>
          <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {members ? ( 
            members.map((member, index) => (
              <tr key={index}>
                <td>{index + 1}</td>
                <td>{`${member.fname} ${member.lname}`}</td>
                <td>{member.email || '-'}</td>
                <td>{member.phone || '-'}</td>
                <td>
                  <Button
                    variant="primary"
                    size="sm"
                    className="me-4"
                    disabled={isLoading}
                    onClick={!isLoading ? handleActionClick : null}
                  >
                    {isLoading ? 'Loading…' : 'Edit'}
                  </Button>

                  <Button
                    variant="danger"
                    size="sm"
                    disabled={isLoading}
                    onClick={!isLoading ? handleActionClick : null}
                  >
                    {isLoading ? 'Loading…' : 'DELETE'}
                  </Button>
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan="5">No members found</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

export default MemberDashboard;

``

我想解决上述错误，并且我想知道其原因。

Answer 1

JS 中不能映射对象。您需要先使用

Object.values()

来获取值数组。

 {members ? ( 
            Object.values(members).map((member, index) => (
            ...

您还可以使用

Object.keys()

映射键数组，或

Object.entries()

映射（键，值）元组数组。