反应材料表onrowadd失败

Question

我正在尝试在材料表中添加一行，但出现错误

提到的例子在material tables docs

package.json

"dependencies": {
    "@material-ui/core": "^4.1.0",
    "@material-ui/icons": "^4.1.0",
    "classnames": "^2.2.6",
    "material-table": "^1.39.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },

testingList.js

<div className={classes.root}>
  <MaterialTable
    title="Testing"
    icons={tableIcons}
    columns={this.state.columns}
    data={this.state.data}
    editable={{
      onRowAdd: (newData) =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            {
              const data = this.state.data
              data.push(newData)
              this.setState({ data }, () => resolve())
            }
            resolve()
          }, 1000)
        }),
    }}
  />
</div>

错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查MTableAction的渲染方法。

如果我在 add 方法上删除，则该函数按预期工作。

如果我删除 tableIcons 所在的行 icons={tableIcons} 也可以正常工作

const tableIcons = {
    FirstPage: FirstPage,
    LastPage: LastPage,
    NextPage: ChevronRight,
    PreviousPage: ChevronLeft,
};

Answer 1

import React, { useState, useEffect } from 'react';
import Search from "@material-ui/icons/Search";
import ViewColumn from "@material-ui/icons/ViewColumn";
import SaveAlt from "@material-ui/icons/SaveAlt";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import Add from "@material-ui/icons/Add";
import Check from "@material-ui/icons/Check";
import FilterList from "@material-ui/icons/FilterList";
import Remove from "@material-ui/icons/Remove";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
import Clear from "@material-ui/icons/Clear";
import DeleteOutline from "@material-ui/icons/DeleteOutline";
import Edit from "@material-ui/icons/Edit";
import MaterialTable from "material-table";
import UserService from "../../services/user.service";
import ToastServive from "react-material-toast";
import userService from '../../services/user.service';
var _table_Data = [];

const toast = ToastServive.new({
  place: "topRight",
  duration: 2,
  maxCount: 8,
});

const server_Data = userService._get_data().then((response) => {
  return response.data.data
})

export default function InputTable(props) {
    useEffect(() => {
      UserService._get_data().then((response) => {
        const dataUpdate = [...response.data.data];
        setData([...dataUpdate]);
      })  
    })

    const [columns] = useState([
        {
          title: "Name",
          field: "Name",
          cellStyle: {
            width: "15%",
            maxWidth: "15%",
            fontSize: 12,
          },
          headerStyle: {
            width: "15%",
            maxWidth: "15%",
          },
        },
        {
          title: "Exposure",
          field: "EAD",
          cellStyle: {
            width: "20%",
            maxWidth: "20%",
            fontSize: 12,
            textAlign: "left",
          },
          headerStyle: {
            width: "20%",
            maxWidth: "20%",
            textAlign: "left",
          },
        },
        {
          title: "Def. Prob.",
          field: "PD",
          cellStyle: {
            width: "25%",
            maxWidth: "25%",
            fontSize: 12,
            textAlign: "left",
          },
          headerStyle: {
            width: "25%",
            maxWidth: "25%",
            textAlign: "left",
          },
        },
        {
          title: "LGD",
          field: "LGD",
          cellStyle: {
            width: "30px",
            maxWidth: "30px",
            fontSize: 12,
            textAlign: "left",
          },
          headerStyle: {
            width: 20,
            maxWidth: 12,
            textAlign: "left",
          },
        },
        {
          title: "Corr",
          field: "w",
          cellStyle: {
            width: 20,
            maxWidth: 20,
            fontSize: 12,
            textAlign: "left",
          },
        },
      ]);
    const [data, setData] = useState(_table_Data);
    return (
      <div
        style={{
          fontSize: 10,
          maxWidth: "100%",
          margin: "auto",
          padding: "0 0",
        }}
      >
        <MaterialTable
          icons={{
            Check: Check,
            DetailPanel: ChevronRight,
            Delete: DeleteOutline,
            Export: SaveAlt,
            Filter: FilterList,
            FirstPage: FirstPage,
            LastPage: LastPage,
            NextPage: ChevronRight,
            PreviousPage: ChevronLeft,
            Search: Search,
            ThirdStateCheck: Remove,
            Add: Add,
            SortArrow: ArrowDownward,
            Clear: Clear,
            Edit: Edit,
            ViewColumn: ViewColumn,
            ResetSearch: Clear,
          }}
          options={{
            actionsColumnIndex: -1,
            headerStyle: {
              fontSize: 12,
              fontWeight: "bold",
              backgroundColor: "white",
              color: "black",
            },
            rowStyle: {
              color: "black",
              backgroundColor: "#eeeeee",
              height: "50px",
            },
            actionsCellStyle: {
              fontSize: "small", //doesn't work
            },
            showTitle: true,
            search: true,
            padding: "dense",
            exportButton: true,
          }}
          title="Editable Preview"
          columns={columns}
          data={data}
          editable={{
            onBulkEditRow: (changes) => {
              console.log(changes);
            },
            onBulkUpdate: (changes) =>
              new Promise((resolve, reject) => {
                setTimeout(() => {  
                  resolve();
                }, 1000);
              }),
            onRowAddCancelled: (rowData) => console.log("Row adding cancelled"),
            onRowUpdateCancelled: (rowData) =>
              console.log("Row editing cancelled"),
            onRowAdd: (newData) =>
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  const _sendData = newData;
                  UserService.datamanage(_sendData).then((response) => {
                    toast.success(JSON.parse(JSON.stringify(response.data.message)));
                  }).catch(() => {
                    toast.error("failed")
                  })             
                  resolve();
                }, 1000);
              }),
            onRowUpdate: (newData, oldData) =>
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  const dataUpdate = [...data];
                  const index = oldData.tableData.id;
                  dataUpdate[index] = newData;
                  setData([...dataUpdate]);
                  resolve();
                }, 1000);
              }),
            onRowDelete: (oldData) =>
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  const dataDelete = [...data];
                  const index = oldData.tableData.id;
                  dataDelete.splice(index, 1);
                  setData([...dataDelete]);
                  resolve();
                }, 1000);
              }),
          }}
        />
      </div>
    );
}

Answer 2

我遇到了同样的问题，我通过在components 下添加Actions 解决了这个问题，这样代码就变成了：

<Table
title="Editable Preview"
columns={this.state.columns}
data={this.state.data}
editable={{
  isEditable: rowData => rowData.name === "a", // only name(a) rows would be editable
  isDeletable: rowData => rowData.name === "b", // only name(a) rows would be deletable

  onRowAdd: newData => new Promise((resolve) => console.log("onrowadd", newData)),
  onRowUpdate: (newData, oldData) => new Promise((resolve) => console.log("onRowUpdate", newData, oldData)),
  onRowDelete: (oldData) => new Promise((resolve) => console.log("onRowDelete", oldData)),
}}
components={{
  Actions: props => (
    <div>
      <IconButton
        onClick={() =>
          this.props.history.push(`/teams/${props.data.uuid}`)
        }
      >
        <EditIcon />
      </IconButton>
      <IconButton
        onClick={() =>
          this.props.history.push(`/teams/${props.data.uuid}`)
        }
      >
        <EditIcon />
      </IconButton>
    </div>
  )
}}
/>

希望这会有所帮助！

Answer 3

我通过降级到版本 1.54.0 解决了这个问题