通过 Fetch API 方法将 JSON 映射到表的正确方法（react js）

Question

我正在尝试将一些 json 元素映射到一个表（Customers.jsx 使用），但看不到找出正确的方法。如何将我的 Fetch Method 正确插入 Customers.jsx？尤其是映射 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 });
        });
}

Customers.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
   }
]

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

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 挂钩。这个钩子让你可以在组件挂载时以及它的依赖数组中定义的任何变量发生变化时执行一个函数。像这样：

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

    //...
}

更新：这是您可以在组件本身中使用它的方式

//...

const Customers = () => {

    const [data, setData] = useState();

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

    useEffect(() => {
        refreshList();
    }, []);

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