從材料表中的React狀態動態查找

Question

我使用的是材料表組件，其中填充了來自Redux（對象數組）的動態數據，但隨后我在組件狀態內對該數據進行了其他處理。 要創建列下拉過濾器，每個列的選項數組中都有一個元素lookup ，該元素接收一個對象並根據其值創建下拉列表。 我正在從數據中提取一些項目，並將它們放入處於組件狀態的元素中。 這是一個對象，與lookup收到的對象相同。 事實是該組件顯示一個空的下拉菜單，就像對象是空的一樣，但不是。 我將其登錄到控制台，並且該對象充滿了我需要的數據。 我最初以為是一個渲染問題，對象在開始時是空的，然后填充了數據，但是組件每次都渲染（是的，React是反應性的）。 這只是幫助我解決此問題的代碼：

表組件

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
    }
    ]
  })
}

希望這可以幫助。 讓我知道，是否適合您。 如果您有任何疑問，請告訴我。 快樂的編碼。