如何在 React 中操作数据

Question

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

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

所以我得到了 table 上的数据，但我想添加一个自定义过滤器。所以我需要玩 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}
    />
)

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

如何在 React 中操作数据

hHow to manipulate data in react

function

reactjs

redux

antd