React - 搜索和过滤数据集

Question

我有一个react应用程序，它正在从express服务器获取数据。当用户输入与数据集中的某个内容匹配时，提取操作很好，数据显示正确，搜索功能正常工作。然而，如果用户随后删除了他们的输入，则数据集将不会返回到以前的状态，相反，用户将被迫进行硬刷新。

我该如何解决这个问题，以便当用户删除输入(从"james"到"james"(时，页面过滤回所有数据？

function SearchForm({ data, setData }) {


/*TRACK USER INPUT INTO SEARCH BOX*/
const [searchValue, setSearchValue] = useState("");
/*FRONT END: FILTER THROUH DATA TO FIND MATCHES TO SEARCH VALUE*/
const searchVehicles = (data, searchValue) => {
const searchedValue = searchValue.toUpperCase();
const result = data.filter(
(currenttable) =>
currenttable.last_name.toUpperCase().includes(searchedValue) ||
currenttable.first_name.toUpperCase().includes(searchedValue) ||
currenttable.store.toUpperCase().includes(searchedValue)
);
if (searchValue) {
setData(result);
console.log(result);
} else {
setData(data)
}
};
/*CALL THE FUNCTION WHEN INPUT IS ENETERED*/
const handleChange = (event) => {
setSearchValue(event.target.value);
searchVehicles(data, event.target.value);
console.log(searchValue)
};
/*RESET THE SEARCH BAR AND RENDER ALL DATA */
const handleReset = () => {
setSearchValue("");
};
/*OUTPUT */
return (
<form>
<label htmlFor="search">Search: </label>
<input
className="search-applicant"
type="text"
name="search"
placeholder="Search applicant or store"
onChange={event => handleChange(event)}
value={searchValue}
></input>
<button className="search-btn" onClick={handleReset}>
Refresh
</button>
</form>
);
}
export default SearchForm;

Answer 1

明白了！因此，每次过滤都是在修改原始数据。事情是这样的。

起初，您的组件具有data，它(例如(现在是["a"、"b"、"c"]。然后你键入"；a"；，并且它调用将状态改变为["a"]的CCD_ 2。但你正在修改原始数据，所以现在数据只有"；a"；里面什么都没有！

你可以改变你的组件，不改变原始数据，只需直接过滤你的渲染元素

function SearchForm({ data }) {

/*TRACK USER INPUT INTO SEARCH BOX*/
const [searchValue, setSearchValue] = useState("");
/*CALL THE FUNCTION WHEN INPUT IS ENETERED*/
const handleChange = (event) => {
setSearchValue(event.target.value);
};
/*RESET THE SEARCH BAR AND RENDER ALL DATA */
const handleReset = () => {
setSearchValue("");
};
/*OUTPUT */
return (
<form>
<label htmlFor="search">Search: </label>
<input
className="search-applicant"
type="text"
name="search"
placeholder="Search applicant or store"
onChange={event => handleChange(event)}
value={searchValue}
/>
{data
.filter(({ first_name}) => first_name.includes(searchValue)) /* or whatver filter you want*/
.map(({first_name, last_name, store}) => <div key={store}>{`${first_name} ${last_name} => ${store}`}</div>)
}
<button className="search-btn" onClick={handleReset}>
Refresh
</button>
</form>
);
}

或者，您可以创建它的本地副本(例如const [filteredData, setFilteredData] = useState(data)，您将filteredData设置为data，并应用过滤器，但永远不会更改数据(。

参见此处的示例