通过Fetch API方法（react js）将JSON数据映射到<Table/>的正确方法

Question

我不敢相信我问的是一个明显的问题，但我仍然在控制台日志中收到错误。 我正在尝试将一些 json 元素映射到但无法找出正确的方法。 控制台说它无法识别 renderBody 和 BodyData。

如何正确将数据渲染到Table中？

Customers.js

import React from 'react'

import Table from '../components/table/Table'

import React, { Component } from 'react';
import Cookies from 'universal-cookie';

export class Customers extends Component {

    constructor(props) {
        super(props);
        this.state = {
            deps: [],
          };
    }

    componentDidMount() {
        this.refershList();
    }

async refershList() {
    const cookies = new Cookies();
    await fetch('https://xxxxxxxxxxxxxxxxx/Customers', {
        headers: { Authorization: `Bearer ${cookies.get('userToken')}` }
    })
        .then(response => response.json())
        .then(data => {
            this.setState({ deps: data });
        });
}

render() {
const { deps } = this.state;
const customerTableHead = [
    '',
    'name',
    'email',
    'phone',
    'total orders',
    'total spend',
    'location'
]

const renderHead = (item, index) => <th key={index}>{item}</th>

const renderBody = (item, index) => (
    <tr key={index}>
        <td>{item.id}</td>
        <td>{item.name}</td>
        <td>{item.email}</td>
        <td>{item.phone}</td>
        <td>{item.total_orders}</td>
        <td>{item.total_spend}</td>
        <td>{item.location}</td>
    </tr>
)

const Customers = () => {
    return (
        <div>
            <h2 className="page-header">
                customers
            </h2>
            <div className="row">
                <div className="col-12">
                    <div className="card">
                        <div className="card__body">
                            <Table
                                limit='10'
                                headData={customerTableHead}
                                renderHead={(item, index) => renderHead(item, index)}
                                bodyData={deps}
                                renderBody={(item, index) => renderBody(item, index)}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
}

export default Customers

这是Table.jsx组件：

import React, {useState} from 'react'

import './table.css'

const Table = props => {

    const initDataShow = props.limit && props.bodyData ? props.bodyData.slice(0, Number(props.limit)) : props.bodyData

    const [dataShow, setDataShow] = useState(initDataShow)

    let pages = 1

    let range = []

    if (props.limit !== undefined) {
        let page = Math.floor(props.bodyData.length / Number(props.limit))
        pages = props.bodyData.length % Number(props.limit) === 0 ? page : page + 1
        range = [...Array(pages).keys()]
    }

    const [currPage, setCurrPage] = useState(0)

    const selectPage = page => {
        const start = Number(props.limit) * page
        const end = start + Number(props.limit)

        setDataShow(props.bodyData.slice(start, end))

        setCurrPage(page)
    }

    return (
        <div>
            <div className="table-wrapper">
                <table>
                    {
                        props.headData && props.renderHead ? (
                            <thead>
                                <tr>
                                    {
                                        props.headData.map((item, index) => props.renderHead(item, index))
                                    }
                                </tr>
                            </thead>
                        ) : null
                    }
                    {
                        props.bodyData && props.renderBody ? (
                            <tbody>
                                {
                                    dataShow.map((item, index) => props.renderBody(item, index))
                                }
                            </tbody>
                        ) : null
                    }
                </table>
            </div>
            {
                pages > 1 ? (
                    <div className="table__pagination">
                        {
                            range.map((item, index) => (
                                <div key={index} className={`table__pagination-item ${currPage === index ? 'active' : ''}`} onClick={() => selectPage(index)}>
                                    {item + 1}
                                </div>
                            ))
                        }
                    </div>
                ) : null
            }
        </div>
    )
}

export default Table

表格.css

   .table-wrapper {
    overflow-y: auto;
}

table {
    width: 100%;
    min-width: 400px;
    border-spacing: 0;
}

thead {
    background-color: var(--second-bg);
}

tr {
    text-align: left;
}

th,
td {
    text-transform: capitalize;
    padding: 15px 10px;
}

tbody > tr:hover {
    background-color: var(--main-color);
    color: var(--txt-white);
}

.table__pagination {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}

.table__pagination-item ~ .table__pagination-item {
    margin-left: 10px;
}

.table__pagination-item {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.table__pagination-item.active,
.table__pagination-item.active:hover {
    background-color: var(--main-color);
    color: var(--txt-white);
    font-weight: 600;
}

.table__pagination-item:hover {
    color: var(--txt-white);
    background-color: var(--second-color);
}

API JSON 数据

[
   {
      "id":1,
      "name":"Brittan Rois",
      "email":"[email protected]",
      "location":"Bator",
      "phone":"[phone]",
      "total_spend":"$557248.44",
      "total_orders":24011
   },
   {
      "id":2,
      "name":"Matthew Junifer",
      "email":"[email protected]",
      "location":"Bromma",
      "phone":"[phone]",
      "total_spend":"$599864.94",
      "total_orders":60195
   },
   {
      "id":3,
      "name":"Finlay Baylay",
      "email":"[email protected]",
      "location":"Atalaia",
      "phone":"[phone]",
      "total_spend":"$171337.47",
      "total_orders":96328
   },
   {
      "id":4,
      "name":"Beryle Monelli",
      "email":"[email protected]",
      "location":"Martingança",
      "phone":"[phone]",
      "total_spend":"$335862.78",
      "total_orders":78768
   }

]

Answer 1

我以前做过这种类型的事情，从功能上来说，可能想看看我的并按照你的方式遵循它（注意：我将搜索栏和分页系统放在表格的站点内，因此只考虑所需的表格映射部分）：

const [users, setUsers] = useState([]);
const [SearchTerm, setSearchTerm] = useState("");

const [PageNumber, setPageNumber] = useState(0);

const [Usersperpage] = useState(4);
const PagesVisited = PageNumber * Usersperpage;

const pageCount = Math.ceil(users.length / Usersperpage);

const changePage = ({ selected }) => {
    setPageNumber(selected);
}

const RenderUsers = (val) => {
    return (
        <tr key={val.id}>
            <td><Link to={`/Users/User/${val.id}`}>{val.id}</Link></td>
            <td><Link to={`/Users/User/${val.id}`}>{val.name}</Link></td>
            <td><Link to={`/Users/User/${val.id}`}>{val.email}</Link></td>
        </tr>
    )
}

const displayUsers = users.filter((val) => {
    if (SearchTerm === "") {
        return val;
    } else if (val.name.toLowerCase().includes(SearchTerm.toLowerCase())) {
        return val;
    } else if (val.email.toLowerCase().includes(SearchTerm.toLowerCase())) {
        return val;
    }
}).slice(PagesVisited, PagesVisited + Usersperpage).map(RenderUsers);


useEffect(() => {

    getUsers();

}, []);


const getUsers = async () => {

    const res4 = await fetch("https://jsonplaceholder.typicode.com/users");
    const data4 = await res4.json();
    setUsers(data4);
}


return (
    <div className="AppWhole">
        <div className="App">
            <div className="users">
                <h1 style={{ color: 'white' }}>Users</h1>

                <input type="text" className='searchUser' onChange={(e) => { setSearchTerm(e.target.value); }} />
                <div className="user">
                    <div className="app-container">
                        <ReactBootStrap.Table striped bordered hover>
                            <thead>
                                <tr>
                                    <th>
                                        ID
                                    </th>
                                    <th>
                                        Name
                                    </th>
                                    <th>
                                        Email
                                    </th>
                                </tr>
                            </thead>

                            <tbody>
                                {displayUsers}
                            </tbody>
                        </ReactBootStrap.Table>

                        <ReactPaginate
                            pageCount={pageCount}
                            onPageChange={changePage}
                            previousLabel={"<<"}
                            nextLabel={">>"}
                            containerClassName={'paginationLinks'}
                            disabledClassName={'paginationDisabled'}
                            activeClassName={'paginationActive'}
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
);