从 material-table 中的 React 状态动态查找

Question

我正在使用 material-table 组件，我用来自 Redux（对象数组）的动态数据填充它，但随后我在组件状态中使用该数据做其他事情。要创建列下拉过滤器，每个列的选项数组中都有一个元素 lookup，它接收一个对象并根据它的值创建下拉列表。我正在从我的数据中提取一些项目并将它们放入组件状态的元素中。这是一个对象，与 lookup 接收的类型相同。问题是该组件显示一个空的下拉列表，就好像该对象是空的，但事实并非如此。我将它登录到控制台，对象中充满了我需要的数据。我最初认为这是一个渲染问题，对象在开始时是空的，然后它填充了数据，但是组件每次都渲染。（是的，React 是反应式的）。这只是帮助我解决这个问题所需的代码：

Table分量

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

class CustomTable extends Component {
  state = {
    column1: "",
    column2: "",
    column3: "",
    column1FilterList: {}
    columns: [
      {
        title: "Column1",
        field: "column1",
        editable: "onAdd",
        filtering: true,
        lookup: { ...this.column1FilterList }
      },
      {
        title: "Column2",
        field: "column2",
        editable: "onAdd",
        filtering: true,
      },
      {
        title: "Column3",
        field: "column3",
        editable: "onAdd",
        filtering: true
      }
    ]
  };

  componentDidMount() {
    this.props.fetchValues()
    this.props.fetchApplications()
    this.filterColumn1ExistingKeys()
  }

  filterColumn1ExistingKeys = () => {
    return this.props.elements.map(element => {
       return this.setState(prevState => ({
           column1FilterList: {
              ...prevState.column1FilterList,
             [element.name]: element.name
           }
       }))
    })
  }

  render() {
    return (
      <div>
        <MaterialTable
          options={{
            search: false,
            actionsColumnIndex: 4,
            filtering: true
          }}
          title="Search by"
          columns={this.state.columns}
          data={this.state.data}
        />
      </div>
    );
  }
}

export default CustomTable;

Answer 1

问题在于您如何保存该数据。您使用 { ...this.column1FilterList } 在构造函数中创建一个新对象。这将创建一个新对象作为查找对象，其中填充了 column1FilterList 的初始数据（空）。稍后更新 column1FilterList 不会更改该查找对象，因为它已断开连接（新对象）。您还必须像这样更新列中的查找：

const filterColumn1ExistingKeys = () => {
  const column1FilterList = this.state.column1FilterList;
  this.props.elements.forEach(element => column1FilterList[element.name] = element.name)
  this.setState({
    column1FilterList,
    columns: [{
      title: "Column1",
      field: "column1",
      editable: "onAdd",
      filtering: true,
      lookup: { ...column1FilterList }
    },
    {
      title: "Column2",
      field: "column2",
      editable: "onAdd",
      filtering: true,
    },
    {
      title: "Column3",
      field: "column3",
      editable: "onAdd",
      filtering: true
    }
    ]
  })
}

希望这对您有所帮助。如果这对你有用，请告诉我。如果您有任何问题，请告诉我。编码愉快。

从 material-table 中的 React 状态动态查找

Dynamic lookup from React's state in material-table

javascript

jsx

reactjs

material-table