map JSON 通过获取 API 方法（反应 js）到表的正确方法

Question

我正在尝试将 map 一些 json 元素添加到表格中（Customers.jsx using ），但看不到正确的方法。 如何正确地将我的Fetch 方法插入到Customers.jsx中？ 特别是 map renderBody部分和bodyData={/ JsonData /}

获取方法

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 });
        });
}

客户.jsx

import React from 'react'

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


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={/*The JsonData*/}
                                renderBody={(item, index) => renderBody(item, index)}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Customers

API JSON 数据

[
   {
      "id":1,
      "name":"Brittan Rois",
      "email":"brois0@unicef.org",
      "location":"Bator",
      "phone":"+62 745 807 7685",
      "total_spend":"$557248.44",
      "total_orders":24011
   },
   {
      "id":2,
      "name":"Matthew Junifer",
      "email":"mjunifer1@buzzfeed.com",
      "location":"Bromma",
      "phone":"+46 993 722 3008",
      "total_spend":"$599864.94",
      "total_orders":60195
   },
   {
      "id":3,
      "name":"Finlay Baylay",
      "email":"fbaylay2@purevolume.com",
      "location":"Atalaia",
      "phone":"+55 232 355 3569",
      "total_spend":"$171337.47",
      "total_orders":96328
   },
   {
      "id":4,
      "name":"Beryle Monelli",
      "email":"bmonelli3@amazonaws.com",
      "location":"Martingança",
      "phone":"+351 734 876 8127",
      "total_spend":"$335862.78",
      "total_orders":78768
   }
]

表.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);
}

Answer 1

要处理这种情况，您可以在组件内使用useEffect挂钩。 这个钩子允许你在组件挂载时以及在其依赖项数组中定义的任何变量发生更改时执行 function。 像这样：

const Customers = () => {
    //...

    const [deps, setDeps] = useState();

    refreshList() {
        const cookies = new Cookies();
        fetch('https://xxxxxxxxxxxxxxxxx/Customers', {
            headers: { Authorization: `Bearer ${cookies.get('userToken')}` }
        }).then(response => response.json()).
           then(data => {
                setDeps(data);
        });
    }

    //This effect will call refreshList() when the component is mounted
    useEffect(() => {
        refreshList();
    }, []); //The empty array tells that this will be executed only when the component mounts

    //...
}