我遇到了一些答案，说错误与空格有关，但是API端点的数据都没有空格。

其他人说问题出在子元素上，但是我看不出<tbody>标记内有什么问题。

app.js:39625 Warning: validateDOMnesting(...): Text nodes cannot appear as a child of <tbody>.
    in tbody (created by SaleList)
    in table (created by SaleList)
    in div (created by SaleList)
    in div (created by SaleList)
    in SaleList (created by Context.Consumer)
    in Route (created by App)
    in SaleContextProvider (created by App)
    in div (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App

SaleList.js

import React,{ useContext } from 'react';
import { SaleContext } from '../../contexts/SaleContext';
import Sale from './Sale';

const SaleList = () => {
    const { state } = useContext(SaleContext);
    const { sales } = state;

    sales.length ? console.log(sales) : null;

    const saleList = sales.length ? sales.map((sale,i) => {
        return (
            <Sale key={sale.id} data={sale} rowNumber={i + 1} />
        );
    }) : 'N/A';

    return (
        <div classname="container">
            <div classname="item-list">
                <h1>Sales</h1>

                <table classname="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Date</th>
                            <th scope="col">Customer</th>
                            <th scope="col">Item</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Price</th>
                            <th scope="col">Total</th>
                        </tr>
                    </thead>

                    <tbody>
                        {saleList}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

export default SaleList;

Sale.js

import React from 'react';

const Sale = ({ data,rowNumber }) => {
    const sale = (
        <tr>
            <th scope="row">{rowNumber}</th>
            <td>{}</td>
            <td>{data.customer.name}</td>
            <td>{data.item}</td>
            <td>{data.quantity}</td>
            <td>${data.price.toLocaleString('en-US')}</td>
            <td>${(data.quantity * data.price).toLocaleString('en-US')}</td>
        </tr>
    );

    return sale;
}

export default Sale;