0

我正在构建一个应用程序，当代码有效时，我试图消除持续的警告消息，但收效甚微。我一直得到：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

检查Body. 在 SimpleRow 中（由 Body 创建） 在 Body 中（由 BootstrapTable 创建） 在表中（由 BootstrapTable 创建） 在 div 中（由 BootstrapTable 创建） 在 BootstrapTable 中（由 Context.Consumer 创建） 在 ColumnManagementProvider 中（由 Context.Consumer 创建）在 DataProvider 中（创建通过 BootstrapTableContainer) 在 BootstrapTableContainer (在 DriverList.js:158) 在 div (在 DriverList.js:156) 在 DriverList (由 Connect(DriverList) 创建)

这是生成错误的表的代码：

const columns = [
        {
            dataField: 'id',
            text: 'uuid',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
            hidden: true,
        },
        {
            dataField: 'driverName',
            text: 'Driver Name',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
        },
        {
            dataField: 'dockCode',
            text: 'Dock Code',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
        },
        {
            dataField: 'scacCode',
            text: 'SCAC Code',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
        },
        {
            dataField: 'epochIn',
            text: 'Check In Time',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
            formatter: (cell,row,rowIndex,formatExtraData) =>{
                var localDateTime = new Date(cell*1000);
                return (localDateTime.toString());
            }
        },
        {
            dataField: 'trips',
            text: 'Trips Assigned?',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
            formatter: (cell,row,rowIndex,formatExtraData) => {
                if (cell !== '' && cell != null)
                    return ('Yes')
                else
                    return ('No')
            },
            style: (cell,row,rowIndex,colIndex) => {
                if (rowIndex === mousedRow)
                   return {backgroundColor: GLOBAL_STYLES.CONSTANTS.orange};
                else if (cell !== '' && cell != null)
                   return {backgroundColor: GLOBAL_STYLES.CONSTANTS.success};
                else
                   return {backgroundColor: GLOBAL_STYLES.CONSTANTS.danger};
            } 
        }
    ];

    const rowEvents = {
        onClick: (e, row, rowIndex) => {
            selectDriver(row);
        },
        onMouseEnter: (e, row, rowIndex) => {
            setMousedRow(rowIndex);
        },
        onMouseLeave: (e, row, rowIndex) => {
            if (mousedRow === rowIndex)
                setMousedRow(-1);
        }
    };

    const rowStyle = (row,rowIndex) => {
        const style = {};
        if (rowIndex === mousedRow)
            style.backgroundColor = GLOBAL_STYLES.CONSTANTS.orange;
        else if (rowIndex % 2 == 0)
            style.backgroundColor = GLOBAL_STYLES.CONSTANTS.white;
        else
            style.backgroundColor = GLOBAL_STYLES.CONSTANTS.gray;

        return style;
    }

    if (recordsDirty){
        updateLoadingMessage('Fetching Records');
        fetchRecords();
        touchRecords(false);
    }
    
    return(
        <div>
            {loadingMessage != null ? <LoadingOverlay message={loadingMessage}/> : null}
            <BootstrapTable 
                keyField='id'
                data= { records } 
                columns={ columns } 
                rowStyle={ rowStyle }
                rowEvents={ rowEvents}
            />
        </div>
    );
};

export default connect(mapStateToProps,mapDispatchToProps)(DriverList);

任何帮助理解为什么在 keyfield 中指定的唯一键没有摆脱警告将不胜感激。

4

0 回答 0