如何让 BootstrapTable 用更新的数据重绘？

Question

我有一个来自react-bootstrap 的表格，其中显示了包含几列的设备列表。我想更改此设置，以便您可以按列重新排序，因此我从 react-bootstrap-table-next 切换到 BootstrapTable。但我的问题是更改组件的状态不会导致表格更新 - 只有当我单击列重新排序表格时才会发生这种情况。

编写代码是为了创建devices_table 并将其保存到状态，然后调用 API 以获取设备版本并将其添加到状态，从而导致组件重绘。但是当再次调用render() 时，附加数据不会添加到表中。

我在https://codesandbox.io/s/react-bootstrap-table-next-new-data-problem-5w0op创建了一个工作示例

import React, { Component } from 'react'
import BootstrapTable from 'react-bootstrap-table-next'

class DeviceTable extends Component {

    constructor(props) {
        super(props)

        this.state = {
            devices_table: {}
        }
    }

    componentDidUpdate(prevProps) {
        if (prevProps.devices !== this.props.devices) {
            let devices_table = this.props.devices.map(this.myFunction);
            this.setState({
                devices_table: devices_table
            })
        }
    }

    myFunction = (value, index, array) => {
        let device = {};

        device.device = value;
        device.index = index + 1;
        device.version = '';

        apiGetDeviceVersion(value.identifier)
            .then((res, deviceId = value.identifier) => {
                let devices_table = this.state.devices_table;
                let objIndex = devices_table.findIndex(d => d.device.identifier === deviceId)
                devices_table[objIndex].version = res.valueReported;
                this.setState({
                    devices_table: devices_table
                })
            })
            .catch(e => {
                console.log(e)
            })

        return device;
    }

    render() {
        const devices = this.state.devices_table;
        if (isEmpty(devices)) {
            return (<div></div>)
        }
        let columns = [
            {
                text: "#",
                dataField: "index",
                sort: true
            },
            {
                text: "ID",
                dataField: "device.identifier",
                sort: true
            },
            {
                text: "Name",
                dataField: "device.name",
                sort: true
            },
            {
                text: "Status",
                dataField: "device.status",
                sort: true
            },
            {
                text: "Version",
                dataField: "version",
                sort: true
            }
        ];

        return (
            <div>
                <BootstrapTable keyField={"device.identifier"} data={devices} columns={columns}></BootstrapTable>
            </div>
        )
    }
}

export default DeviceTable

Answer 1

componentDidUpdate(prevProps) {
   if (prevProps.devices !== this.props.devices) {
            *let devices_table* = this.props.devices.map(this.myFunction);
            this.setState({
                devices_table: devices_table
            })
        }
}

这可能是由于响应作为异步函数工作（由于 API）而发生的。因此，您必须等待响应使其可用，否则“devices_table”将保持为空或未定义，并导致没有数据可视化。