Javascript 搜索筛选器在setState:react JS上的react表中不起作用

我使用react表用于数据网格目的。我所要做的就是实现一个搜索过滤器，它在整个表中搜索数据，并使用filter方法进行过滤。我为搜索维护了一个单独的组件，并在搜索组件中设置了表的数据。从搜索筛选器中删除字符时，筛选将中断。我做错什么了吗

沙箱：

搜索组件

从“React”导入React；
从“语义ui反应”导入{Input}；
导出默认类GlobalSearchComponent扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
过滤器数据：[]，
搜索输入：“
};
}
handleChange=事件=>{
this.setState（{searchInput:event.target.value}，（）=>
这个.globalSearch（）
);
};
全球搜索=（）=>{
设{searchInput}=this.state；
让filteredData=this.props.data.filter（值=>{
返回(
value.firstName.toLowerCase（）.includes（searchInput.toLowerCase（））||
value.status.toLowerCase（）.includes（searchInput.toLowerCase（））||
价值观
.toString（）
.toLowerCase（）
.includes（searchInput.toLowerCase（））
);
});
this.props.handleSetData(
（filteredData.length>0&&filteredData）| |搜索输入
？过滤数据
：this.props.data
);
};
render（）{
返回(






);
}
}

应用程序组件

从“React”导入React；
从“react dom”导入react dom；
从“/GlobalSearchComponent”导入GlobalSearchComponent；
从“反应表”导入反应表；
导入“react table/react table.css”；
导入“/styles.css”；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
列：[]，
搜索输入：“
};
}
componentDidMount（）{
这是getData（）；
这是getColumns（）；
}
getColumns=（）=>{
让列=[
{
标题：“名字”，
访问者：“名字”
{
标题：“状态”，
访问者：“状态”
},
{
标题：“访问”，
访问者：“访问”
}
];
this.setState（{columns}）；
};
getData=（）=>{
让数据=[
{名字：“AAAA”，状态：“待定”，访问：155}，
{名字：“aabFaa”，状态：“待定”，访问：155}，
{名字：“adaAAaaa”，状态：“批准”，访问：1785}，
{名字：“AAAAA”，状态：“批准”，访问次数：175}，
{名字：“adaSaaa”，状态：“已取消”，访问次数：165}，
{名字：“aasaa”，状态：“已取消”，访问次数：157}，
{名字：“AWEAAEWEA”，状态：“批准”，访问次数：153}，
{名字：“ADAAADSDWEAA”，状态：“批准”，访问次数：17585}，
{名字：“AAAAA”，状态：“批准”，访问次数：175}
this.setState（{data}）；
};
handleSetData=数据=>{
控制台日志（数据）；
this.setState（{data}）；
};
render（）{
设{data，columns}=this.state；
返回(
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

不要更新原始数据，在主应用程序中更新过滤后的数据

搜索组件

从状态中删除

Filteredata[]

，并将全局搜索更改为

globalSearch = () => {
  let { searchInput } = this.state;
  let filteredData = this.props.data.filter(value => {
    return (
      value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
      value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
      value.visits
        .toString()
        .toLowerCase()
        .includes(searchInput.toLowerCase())
    );
  });

  this.props.handleSetData(filteredData);

};

应用程序组件

更改

handleSetData

以更新

Filteredata

而不是数据

handleSetData = data => {
  console.log(data);
  this.setState({ filteredData: data });
};

getData = () => {

  let data = [...]

  this.setState({ data, filteredData: data });
};

// change your render to 

render() {
  let { filteredData, columns } = this.state;
  return (
    <div>
      <GlobalSearchComponent
        data={this.state.data}
        handleSetData={this.handleSetData}
      />
      <ReactTable
        data={filteredData}
        columns={columns}
        defaultPageSize={10}
        className="-striped -highlight"
      />
    </div>
  );
}

handleSetData=data=>{
控制台日志（数据）；
this.setState（{filteredData:data}）；
};
getData=（）=>{
让数据=[…]
this.setState（{data，filteredData:data}）；
};
//将渲染更改为
render（）{
设{filteredData，columns}=this.state；
返回(
);
}

---

为什么

value={this.state.searchInput | |？“}

？@JuniusL。只给它一个默认值。这是多余的，可以删除它。它仍然有效，只是不更新原始数据。

globalSearch = () => {
  let { searchInput } = this.state;
  let filteredData = this.props.data.filter(value => {
    return (
      value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
      value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
      value.visits
        .toString()
        .toLowerCase()
        .includes(searchInput.toLowerCase())
    );
  });

  this.props.handleSetData(filteredData);

};

handleSetData = data => {
  console.log(data);
  this.setState({ filteredData: data });
};

getData = () => {

  let data = [...]

  this.setState({ data, filteredData: data });
};

// change your render to 

render() {
  let { filteredData, columns } = this.state;
  return (
    <div>
      <GlobalSearchComponent
        data={this.state.data}
        handleSetData={this.handleSetData}
      />
      <ReactTable
        data={filteredData}
        columns={columns}
        defaultPageSize={10}
        className="-striped -highlight"
      />
    </div>
  );
}