反应表过滤器组件在重新渲染时丢失状态

Question

我正在使用react和react表。在我的表中，我有一个自定义过滤器组件，用户可以从下拉列表中选择要用于该列的过滤器。就像小于，等于等。

在这里，我找到了一些示例，并尝试进行以下操作：https://codesandbox.io/s/03403m5xzp

当我使用客户端过滤时，一切正常，但是当使用服务器端数据时，出现了一些问题。

问题就是一个例子。我从下拉列表中选择诸如equal-to之类的过滤器类型，然后打开输入内容进行输入。当用户键入某些内容时，我会使用onFetchData方法发出请求，以将该过滤器值发送到后端API，以获取新数据并将其设置到表中。当我收到新数据时，我会更改状态，当然也要更改filterComponent的状态，用户需要再次选择过滤器类型并打开输入以再次输入。

在表数据更改时如何使过滤器组件的状态保持在最后状态？

这是我的表和filterComponent代码。

class ParentComponent extends Component {
  state = {
    betweens: false,
    openTextBoxes: false
  };

  constructor() {
    super();
    this.state = {
      pageSize: 15,
      data: [],
      pages: null,
      loading: false
    };
  }

  render() {
    const { data, pages, loading } = this.state;
    return (
      <ReactTable
        className="-striped -highlight"
        data={this.state.data}
        loading={this.state.loading}
        manual
        columns={columns}
        pages={this.state.pages}
        onFetchData={(state, instance) => {
          this.setState({ loading: true });
          let dataM = {
            pagesize: state.pageSize,
            page: state.page,
            sorts: JSON.stringify(state.sorted),
            filters: JSON.stringify(state.filtered)
          };
          axios
            .post(baseUrl + "v1/report/data/list", dataM, {
              headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
              }
            })
            .then(response => {
              this.setState({
                data: response.data.result,
                pages: Math.ceil(
                  response.data.record_count / this.state.pageSize
                ),
                loading: false
              });
              console.log(this.state.data);
            })
            .catch(error => {
              throw error;
            });
        }}
        filterable={true}
        resizable={true}
        sortable={true}
        defaultFilterMethod={filterCaseInsensitive}
        defaultPageSize={15}
        pageSizeOptions={[5, 10, 15, 20, 25, 50, 100]}
        getTdProps={onRowClick}
        minRows={undefined}
      />
    );
  }
}

class FilterInnerComponent extends React.Component {
  state = {
    betweens: false
  };
  constructor(props) {
    super(props);
    this.state = {
      filterType: "All",
      filterValue: "",
      filterBetweenValue: "",
      openTextBox: true
    };

    this.changeFilterValue = this.changeFilterValue.bind(this);
  }

  changeFilterType(event) {
    console.log(event);
    // console.log(this.props.saveLastStateState)
    const filterType = event.target.value;
    selectedFilterTypeGlobal = filterType;
    this.setState({ filterType: filterType });
    const newValue = "";

    this.state.filterValue = newValue;
    this.state.filterBetweenValue = newValue;

    const newState = {
      ...this.state.filterType,
      ...this.state.filterValue,
      ...this.state.filterBetweenValue,
      filterType
    };

    if (filterType === "is-between" || filterType === "is-not-between") {
      this.state.betweens = true;
    } else {
      this.state.betweens = false;
    }
    if (filterType !== "All") {
      // this.props.getFilterinnerComponent()
      // this.state.openTextBox = true
      this.setState({
        openTextBox: true
      });
    } else {
      this.setState({
        openTextBox: true
      });
    }

    this.setState(newState);
    this.props.onChange(newState);
  }

  changeFilterValue(event) {
    const filterValue = event.target.value;
    selectedFilterValueGlobal = filterValue;
    parseFloat(filterValue).toFixed(2);
    const newState = {
      ...this.state,
      filterValue
    };
    this.setState(newState);
    this.props.onChange(newState);
  }

  changeBetweenFilterValue(event) {
    if (event.keyCode === 13) {
    }
    const filterBetweenValue = event.target.value;

    parseFloat(filterBetweenValue).toFixed(2);

    const newState = {
      ...this.state,
      filterBetweenValue
    };

    // Update local state
    this.setState(newState);
    // Fire the callback to alert React-Table of the new filter
    this.props.onChange(newState);
  }

  render() {
    return (
      <div className="filter">
        <SelectField
          onChange={evt => this.changeFilterType(evt)}
          style={{
            height: "30px",
            fontSize: "12px"
          }}
          value={this.state.filterType}
          autoWidth
        >
          <MenuItem value="All">All</MenuItem>
          <MenuItem value="is-equal-to">Is Equal To</MenuItem>
          <MenuItem value="is-not-equal-to">Is Not Equal To</MenuItem>
          <MenuItem value="greater-than">Greater Than</MenuItem>
          <MenuItem value="greater-than-or-equal-to">
            Greater Than Or Equal To
          </MenuItem>
          <MenuItem value="less-than">Less Than</MenuItem>
          <MenuItem value="less-than-or-equal-to">
            Less Than Or Equal To
          </MenuItem>
          <MenuItem value="is-between">Is Between</MenuItem>
          <MenuItem value="is-not-between">Is Not Between</MenuItem>
        </SelectField>
        {this.state.openTextBox ? (
          <TextField
            onChange={this.changeFilterValue}
            style={{
              width: "100%",
              height: "40px",
              float: "left",
              fontSize: "12px"
            }}
            type="text"
            value={this.state.filterValue}
          />
        ) : null}
        {this.state.betweens ? (
          <TextField
            onChange={evt => this.changeBetweenFilterValue(evt)}
            style={{
              width: "100%",
              height: "40px",
              float: "left",
              fontSize: "12px"
            }}
            type="text"
            value={this.state.filterBetweenValue}
          />
        ) : null}
      </div>
    );
  }
}