材料表反应可编辑列日期选择器警告答案

【问题标题】：Material Table React Editable columns Date Picker Warnings材料表反应可编辑列日期选择器警告
【发布时间】：2020-11-22 23:18:21
【问题描述】：

我正在处理材料表。

我需要在我的数据表中添加几列。我需要在其中一列中添加一个日期时间选择器（可编辑）。另一列应该不可编辑。所以我定义了我的列，如下所示。

const columns1 = [
    { title: 'Name', field: 'name', type: 'string', editable: 'never' },
    { title: 'Birth Date', field: 'birthDate', type: 'datetime' }
];

我参考了https://material-table.com/#/docs/features/editable的代码。

修改后的数据表如下图。

import React, { Component } from "react";
import MaterialTable from "material-table";


const columns1 = [
    { title: 'Name', field: 'name', type: 'string', editable: 'never' },
    { title: 'Birth Date', field: 'birthDate', type: 'datetime' }
];
const data1 = [{ id: 1, name: 'user1', birthDate: '2020-08-01 10:08:00' },
{ id: 2, name: 'user2', birthDate: '2020-09-01 06:24:00' }];

class Chart4 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: data1
        }
    }
    render() {

        return (
            <div>

                <MaterialTable
                    title="Simple Material Table"
                    columns={columns1}
                    data={data1}
                    cellEditable={{
                        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
                            return new Promise((resolve, reject) => {
                                let date = new Date(newValue);

                                let monthNumber = date.getMonth() + 1;
                                let day = date.getDate();
                                let hour = date.getHours();
                                let minutes = date.getMinutes();
                                let seconds = date.getSeconds();

                                month = month < 10 ? `0${month}` : month;
                                day = day < 10 ? `0${day}` : day;
                                hour = hour < 10 ? `0${hour}` : hour;
                                minutes = minutes < 10 ? `0${minutes}` : minutes;
                                seconds = seconds < 10 ? `0${seconds}` : seconds;

                                var month = new Array();
                                month[0] = "JAN";
                                month[1] = "FEB";
                                month[2] = "MAR";
                                month[3] = "APR";
                                month[4] = "MAY";
                                month[5] = "JUN";
                                month[6] = "JUL";
                                month[7] = "AUG";
                                month[8] = "SEP";
                                month[9] = "OCT";
                                month[10] = "NOV";
                                month[11] = "DEC";

                                let monthIntext = month[monthNumber - 1];

                                let formattedDate = day + "-" + monthIntext + "-" + date.getFullYear() + " " + hour + ":" + minutes;
                                let dataTemp = [...this.state.data];
                                dataTemp.forEach(userInfo => {
                                    if (userInfo.id === rowData.id) {
                                        userInfo[columnDef.field] = formattedDate;
                                    }
                                })
                                setTimeout(resolve, 1000);
                            });
                        }
                    }}
                />
            </div>
        );
    }
}

export default Chart4;

这似乎有效，但我收到了几个警告，如下所示。

    index.js:1 Warning: React does not recognize the `cellEditable` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `celleditable` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
        in td (created by ForwardRef(TableCell))
        in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
        in WithStyles(ForwardRef(TableCell)) (created by MTableCell)
        in MTableCell (created by MTableBodyRow)
        in tr (created by ForwardRef(TableRow))
        in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
        in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
        in MTableBodyRow (created by MTableBody)
        in tbody (created by ForwardRef(TableBody))
        in ForwardRef(TableBody) (created by WithStyles(ForwardRef(TableBody)))
        in WithStyles(ForwardRef(TableBody)) (created by MTableBody)
        in MTableBody (created by Droppable)
        in table (created by ForwardRef(Table))
        in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
        in WithStyles(ForwardRef(Table)) (created by Droppable)
        in div (created by Droppable)
        in div (created by Droppable)
        in div (created by Droppable)
        in Droppable (created by ConnectFunction)
        in ConnectFunction
        in ConnectFunction (created by MaterialTable)
        in div
        in Unknown (created by WithStyles(Component))
        in WithStyles(Component) (created by MaterialTable)
        in div (created by ForwardRef(Paper))
        in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
        in WithStyles(ForwardRef(Paper)) (created by Container)
        in Container (created by MaterialTable)
        in Provider (created by App)
        in App (created by ErrorBoundary)
        in ErrorBoundary (created by DragDropContext)
        in DragDropContext (created by MaterialTable)
        in MaterialTable
        in Unknown (created by WithStyles(Component))
        in WithStyles(Component) (at Chart4.js:24)
        in div (at Chart4.js:22)
        in Chart4 (at App.js:9)
        in div (at App.js:8)
        in App (at src/index.js:9)
        in StrictMode (at src/index.js:8)

index.js:1 Warning: Unknown event handler property `onCellEditStarted`. It will be ignored.
    in td (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
    in WithStyles(ForwardRef(TableCell)) (created by MTableCell)
    in MTableCell (created by MTableBodyRow)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
    in MTableBodyRow (created by MTableBody)
    in tbody (created by ForwardRef(TableBody))
    in ForwardRef(TableBody) (created by WithStyles(ForwardRef(TableBody)))
    in WithStyles(ForwardRef(TableBody)) (created by MTableBody)
    in MTableBody (created by Droppable)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in Droppable (created by ConnectFunction)
    in ConnectFunction
    in ConnectFunction (created by MaterialTable)
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at Chart4.js:24)
    in div (at Chart4.js:22)
    in Chart4 (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)
console.<computed> @ index.js:1
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
validateProperty$1 @ react-dom.development.js:5484
warnUnknownProperties @ react-dom.development.js:5595
validateProperties$2 @ react-dom.development.js:5619
validatePropertiesInDevelopment @ react-dom.development.js:5662
setInitialProperties @ react-dom.development.js:5941
finalizeInitialChildren @ react-dom.development.js:7499
completeWork @ react-dom.development.js:18978
completeUnitOfWork @ react-dom.development.js:22192
performUnitOfWork @ react-dom.development.js:22165
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.js:141
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Warning: Unknown event handler property `onCellEditFinished`. It will be ignored.
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by MTableBodyRow)
    in MTableBodyRow (created by MTableBody)
    in tbody (created by ForwardRef(TableBody))
    in ForwardRef(TableBody) (created by WithStyles(ForwardRef(TableBody)))
    in WithStyles(ForwardRef(TableBody)) (created by MTableBody)
    in MTableBody (created by Droppable)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in div (created by Droppable)
    in Droppable (created by ConnectFunction)
    in ConnectFunction
    in ConnectFunction (created by MaterialTable)
    in div
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at Chart4.js:24)
    in div (at Chart4.js:22)
    in Chart4 (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

谁能告诉我需要做什么来修复这些警告？此外，是否可以对 onCellEditApproved 进行任何改进？提前致谢。

【问题讨论】：

标签： datatable material-ui react-material

【解决方案1】：

我也在我的应用程序中使用react-table，这个问题与库的当前版本有关，你的代码中没有关于这个问题的问题。在库的 GitHub 中有一个关于这个持续问题的线程正在讨论 right here。如果您关心生产环境，则不会在此处显示。

【讨论】：