javascript - 搜索过滤器不适用于 setState 上的反应表:React JS
问题描述
我将 react-table 用于数据网格目的。我正在尝试实现一个搜索过滤器,该过滤器在整个表中搜索数据并使用过滤器方法进行过滤。我为搜索维护了一个单独的组件,并在搜索组件中设置了表的数据。从搜索过滤器中删除字符时过滤中断。我在这里做错什么了吗。
沙盒:https ://codesandbox.io/s/stoic-gould-kw9iq
搜索组件
import React from "react";
import { Input } from "semantic-ui-react";
export default class GlobalSearchComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
filteredData: [],
searchInput: ""
};
}
handleChange = event => {
this.setState({ searchInput: event.target.value }, () =>
this.globalSearch()
);
};
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.length > 0 && filteredData) || searchInput
? filteredData
: this.props.data
);
};
render() {
return (
<>
<br />
<Input
size="large"
name="searchInput"
value={this.state.searchInput || ""}
onChange={this.handleChange}
label="Search"
/>
<br />
<br />
</>
);
}
}
应用组件
import React from "react";
import ReactDOM from "react-dom";
import GlobalSearchComponent from "./GlobalSearchComponent";
import ReactTable from "react-table";
import "react-table/react-table.css";
import "./styles.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
columns: [],
searchInput: ""
};
}
componentDidMount() {
this.getData();
this.getColumns();
}
getColumns = () => {
let columns = [
{
Header: "First Name",
accessor: "firstName"
{
Header: "Status",
accessor: "status"
},
{
Header: "Visits",
accessor: "visits"
}
];
this.setState({ columns });
};
getData = () => {
let data = [
{ firstName: "aaaaa", status: "Pending", visits: 155 },
{ firstName: "aabFaa", status: "Pending", visits: 155 },
{ firstName: "adaAAaaa", status: "Approved", visits: 1785 },
{ firstName: "aAaaaa", status: "Approved", visits: 175 },
{ firstName: "adaSaaa", status: "Cancelled", visits: 165 },
{ firstName: "aasaaa", status: "Cancelled", visits: 157 },
{ firstName: "aweaaaaaewea", status: "Approved", visits: 153 },
{ firstName: "adaAAadsdweaa", status: "Approved", visits: 17585 },
{ firstName: "aAaaaa", status: "Approved", visits: 175 }
this.setState({ data });
};
handleSetData = data => {
console.log(data);
this.setState({ data });
};
render() {
let { data, columns } = this.state;
return (
<div>
<GlobalSearchComponent
data={this.state.data}
handleSetData={this.handleSetData}
/>
<ReactTable
data={data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
解决方案
不要更新原始数据,更新主应用程序中的过滤数据。
搜索组件
从状态中删除filteredData[]
,并将全局搜索更改为
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
为更新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>
);
}
推荐阅读
- ios - Swift 无法为导航栏按钮项设置动画
- laravel - 运行数据库播种器时获取类不存在错误
- ionic4 - 使用 CMD 构建一个 Ionic 4 Capacitor 应用程序,就像 Cordova
- python - 获取运动员人数
- c - strtok_s return incorrect data inside windbg
- azure-cosmosdb - 从 Cosmos SQL 中获取分组(不同的?!?)值数组
- jquery - 在jquery中的2个元素之间添加css
- c - 我该如何解决这个堆栈溢出错误?
- c# - 在忽略工作日和节假日的 TimeSpan 之后查找 DateTime
- c# - 着色器场景中的立方体贴图天空盒