如何从对象列表中显示 table 反应 javascript 中的数据？

Question

我正在关注 youtube 上的一些教程，他成功地显示了数据，但它是硬编码数据，我想从后端获取数据。数据成功到达（我在 console.log 的控制台上看到它）但我无法在 table.

中显示

这是我的代码：

import React, { useEffect, useState } from 'react';

import * as ReactBootStrap from 'react-bootstrap';
import * as service from '../service/FetchCustomerService';

function MainPanel() {

  const [customers, setCustomers] = useState([]);
  

  useEffect(() => {
    const fetchPostList = async () => {
      const response = await service.getCustomerList();
      setCustomers({ response });
      console.log(response.data)
    };
    fetchPostList()
  }, [setCustomers]);

  return (
    <ReactBootStrap.Table striped bordered hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>FirstName</th>
            <th>LastName</th>
          </tr>
        </thead>
        <tbody>
          {customers &&
            customers.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.firstName}</td>
                <td>{item.lastName}</td>
              </tr>
            ))}
        </body>
      </ReactBootStrap.Table>
  );
}

export default MainPanel;

这是获取数据的异步服务方法：

export async function getCustomerList() {
    return axios.get("http://localhost:8080/customer/list");    
}

后端成功返回列表中的 5 条数据，但我无法在 table 上显示它。在示例控制台输出中，首先成功打印列表，然后

Uncaught TypeError: customers.map is not a function
    at MainPanel (MainPanel.js:29:1)
    at renderWithHooks (react-dom.development.js:16141:1)
    at updateFunctionComponent (react-dom.development.js:20313:1)
    at beginWork (react-dom.development.js:22356:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
    at invokeGuardedCallback (react-dom.development.js:4270:1)
    at beginWork (react-dom.development.js:27243:1)
    at performUnitOfWork (react-dom.development.js:26392:1)
    at workLoopSync (react-dom.development.js:26303:1)

如何显示数据？

Answer 1

当使用 axios 时，您可以通过 response.data 从 API 获得结果。

您不需要添加 setCustomers（React setState 函数），因为它是由 useState.

创建的

根据 React 文档，

React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

useEffect(() => {
    const fetchPostList = async () => {
      const response = await service.getCustomerList();
      setCustomers(response.data);
      console.log(response.data)
    };
    fetchPostList()
  }, []);

如何从对象列表中显示 table 反应 javascript 中的数据？

How to show table data in react javascript from a list of object?

javascript

typescript

reactjs

react-bootstrap

bootstrap-table