Question

我正在尝试将自定义过滤器添加到我的antd表中，但是我遇到了使用数据的问题。

get valuations() {
    var arr = this.props.valuation;
    var valArray = [];
    for (var i = 0; i < arr.length; i++) {
      valArray.push({
        date: arr[i].registered_date,
        name: arr[i].full_name,
        year: arr[i].year
      });
    }
    return valArray;
  }

render(){
  const columns = [
    {
      title: "Date",
      dataIndex: "date",
      },
    {
      title: "Name",
      dataIndex: "name",
    },
    {
      title: "Year",
      dataIndex: "year"
    },
  ];

  return(
    <Table
      columns={columns}
      dataSource={this.valuations}
    />
  )
}

所以我得到了表上的数据，但我想添加一个自定义过滤器。所以我需要和valArray一起玩。我的问题是如何使用函数估值返回的数组。我知道如何过滤数组，但我只是不知道如何在其函数之外使用数组。

我尝试使用数据设置新状态但不起作用。

Answer 1

您需要操纵this.valuations。创建输入框或其他元素以获取过滤器值： -

让我们过滤你的名字属性：

现在

componentDidMount = () => {
    this.valuations();
}

valuations = () => {
    // set state instead of return here you can optimize your code using filter method here
    this.setState({data: valArray})
}

nameFilterHandler = (inputValue) => {
    const {valuation} = this.props;

    //Edited Here.
    valuation.filter((data) => {
        data.name = data.full_name,
        data.date = data.registered_date,
        return date.full_name && data.full_name.match(this.state.inputValue)
    })

    this.setState({data: valuation});
}

return(
    <Table
        columns={columns}
        dataSource={this.state.data}
    />
)

尝试这一点并考虑所有过滤器并为所有人创建一个通用方法。

h如何操纵反应中的数据

1 个答案: