React Material Table - 添加行时的新字段答案

【问题标题】：React Material Table - New field when add rowReact Material Table - 添加行时的新字段
【发布时间】：2020-03-20 01:49:23
【问题描述】：

在下面从example 获取的材料表中，如何在添加新行时显示“隐藏字段”？我不确定在即将添加新行时如何访问状态（在 onRowAdd 之前）。是否可以不用太头疼？

  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: 'Name', field: 'name' },
        { title: 'Hidden Field', field: 'hiddenfield', hidden: true }
      ],
      data: [
        { name: 'Mehmet' },
        { name: 'Zerya Betül'},
      ]
    }
  }

  render() {
    return (
      <MaterialTable
        title="Editable Preview"
        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)
            }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  const data = this.state.data;
                  const index = data.indexOf(oldData);
                  data[index] = newData;
                  this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            }),
          onRowDelete: oldData =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  let data = this.state.data;
                  const index = data.indexOf(oldData);
                  data.splice(index, 1);
                  this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            }),
        }}
      />
    )
  }
} ```

【问题讨论】：

你是怎么解决这个问题的？

标签： reactjs material-ui material-table

【解决方案1】：

在您的 <MaterialTable /> 组件中，您应该像这样替换 data 属性：

data={Array.from(this.state.data)}.

这在文档中没有记录。更多信息在这里：https://github.com/mbrn/material-table/issues/1900

【讨论】：