React+Axios获取数组可console打印但无法在UI表格中渲染

核心故障原因 #

react-bootstrap-table-next 组件的列配置dataField属性对对象字段名大小写严格敏感，会精确匹配传入数组元素的属性名读取值。
你当前代码里列配置写的是大写开头的Id/Code/Recipient/Created，但接口返回的数组对象字段实际为小写开头的id/code/recipient/created，组件无法读取到对应属性值，因此只会渲染表头，单元格无内容。
同时你配置的keyField="Id"也和实际字段名不匹配，之前的key prop警告本质没有完全解决，只是被其他逻辑暂时掩盖。

附带逻辑bug修复 #

你当前的loading状态逻辑存在两个问题：

• 语义颠倒：用loading=true表示加载完成，不符合常规开发语义，后续维护容易出错
• 异常分支无状态重置：接口请求报错时不会修改loading状态，页面会永久卡在加载动画

修复后可直接运行的代码 #

import React, { useState, useEffect } from 'react';
import Axios from 'axios';
import BootstrapTable from 'react-bootstrap-table-next';
import PaginationFactory from 'react-bootstrap-table2-paginator';
import ToolkitProvider, {Search} from 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit';
import Spinner from 'react-bootstrap/Spinner';

const InviteTable = () => {

    const [invites, setInvites] = useState([]);
    // 初始为加载中状态
    const [loading, setLoading] = useState(true);
    const { SearchBar } = Search;
    const url = "http://localhost:5000/api/get";

    //Define columns 字段名和接口返回完全对齐（小写开头）
    const columns = [
        { dataField: "id", text: "Id", headerStyle: () => {return { width: "10%" };} },
        { dataField: "code", text: "Invite Code", headerStyle: () => {return { width: "10%" };} },
        { dataField: "recipient", text: "Recipient Email", headerStyle: () => {return { width: "35%" };}  },
        { dataField: "created", text: "Date Sent", headerStyle: () => {return { width: "35%" };}  },
    ];

    //GET and set data
    useEffect(() => {
        Axios.get(url).then(result => {
            setInvites(result.data);
            console.log(result.data);
        })
        .catch(function(error) {
            console.log(error);
        }).finally(() => {
            // 无论请求成功/失败，都关闭加载态
            setLoading(false);
        });
    }, []);

    return (
        <div>
            {loading ? (
                <Spinner animation="border" />
            ) : (
                <ToolkitProvider keyField="id" data={invites} columns={columns} search>
                {(props) => (
                    <div>
                        <SearchBar {...props.searchProps} />
                        
                        <BootstrapTable
                        {...props.baseProps}
                        noDataIndication="暂无邀请数据"
                        pagination={PaginationFactory()}
                        />
                    </div>
                )}
                </ToolkitProvider>                  
            )}
        </div>
    )
};

export { InviteTable }

验证步骤 #

替换代码后可以先在setInvites(result.data)后加一行console.log(result.data[0])，确认单条数据的字段名和dataField配置完全一致，如果后端后续改了字段名，同步修改列配置即可。

内容的提问来源于stack exchange，提问作者It hurts when IP