javascript - 在反应表下拉过滤器中动态拉

Question

我需要过滤 react-table 中的状态列，这些过滤器的下拉列表需要基于后端 api 中的可用数据。到目前为止，我有下面的代码工作。有人可以帮我验证这段代码吗？或者请有更好的方法。PS。请忽略格式。

class Transaction extends React.Component<any, any> {
  componentWillMount() {
    this.props.dispatch(fetchTransaction());
  }

  render() {
    let transactionList = this.props.transactions.transactions;

    const customFilter = ({ filter, onChange }) => {
      return (
        <select
          onChange={e => onChange(e.target.value)}
          style={{ width: "100%" }}
          value={filter ? filter.value : "all"}
        >
          <option value="all">All</option>
          {transactionList
            .map(item => item.tran_status)
            .filter((item, i, s) => s.lastIndexOf(item) == i)
            .map(function(tran_status) {
              return (
                <option key={tran_status.toString()} value={tran_status}>
                  {tran_status}
                </option>
              );
            })}
        </select>
      );
    };

    const customFilterMethod = (filter, row) => {
      if (filter.value === "") {
        return true;
      }
      if (transactionList.includes(filter.value)) {
        return row[filter.id] === filter.value;
      } else {
        return true;
      }
    };

    return (
      <div>
        <ReactTable
          data={transactionList}
          columns={[
            {
              Header: "Status",
              accessor: "tran_status",
              filterMethod: (filter, row) => customFilterMethod(filter, row),
              Filter: ({ filter, onChange }) =>
                customFilter({ filter, onChange })
            }
          ]}
        />
        <br />
      </div>
    );
  }
}