反应：表搜索查询不过滤表数据

Question

我有一张桌子，上面有我从道具中获得的数据。数据结构如下：

[{user1: value, data1: value}, {user2: value, data2: value}]

我想做的是编写一个“搜索字段”和一个“列选择器”，它们将通过输入查询过滤表输入（此查询仅在选定的列范围内进行检查）。

这是现在的代码：

class App extends React.Component {
  state = {
    query: '',
    columnToQuery: 'user'
  }


  componentDidMount = () => {
    const { loadTestData } = this.props;
    loadTestData();
  }

  getTableRows = () => {
    // testData format is:
    // [{user1: value, data1: value}, {user2: value, data2: value}]
    const { testData } = this.props;

    const testDataFiltered = this.state.query 
      ? testData.filter(elem => elem[this.state.columnToQuery].includes(this.state.query))
      : testData

    return testDataFiltered.map(item => ({
      // Id - uuid timestamp 
      id: `${uuidv1()}`,
      row: [
        moment(item.date).format('DD.MM.YYYY HH:mm:ss'),
        item.user,
    }));
  }

  render() {
    const { testData } = this.props;

    console.log(this.state);

    if (!testData) {
      return (
        <div className="loader-view mt-25 w-100">
          <CircularProgress />
        </div>
      );
    }

    return (
      <div className="app-wrapper">
        <div id="my-tasks-page" className="row animated slideInUpTiny animation-duration-3">
          <CardBox
            styleName="col-12"
            cardStyle="p-0"
            heading={<IntlMessages id="pages.testData" />}
            headerOutside
          >
            <Paper>

              <TextField
                id="dataSearch"
                label="Search field"
                type="search"
                margin="normal"
                value={this.state.query}
                onChange={(event) => 
                  this.setState({ query: event.target.value })
                }
                fullWidth
              />

              <FormControl className="w-100 mb-2">
                <InputLabel htmlFor="">Select a column</InputLabel>
                <Select
                  value={this.state.columnToQuery}
                  onChange={(event) => 
                    this.setState({ columnToQuery: event.target.value })
                  }
                >
                  <MenuItem value='date'>Date</MenuItem>
                  <MenuItem value='user'>Executant</MenuItem>
                </Select>
              </FormControl>

              <DataTable
                columns={columns}
                data={this.getTableRows()}
                query={this.state.query}
                columnToQuery={this.state.columnToQuery}
                noDataMessage="Currently there are no info" 
              />

            </Paper>
          </CardBox>
        </div>
      </div>
    );
  }
}

我用控制台操作记录了状态和testData数组，filter中的getTableRows()函数正常运行，但是表未使用过滤后的数据重新呈现，这可能是一个原因？