如何不实时过滤

Question

我正在我的练习web应用程序上构建，我试图从提取的数据中过滤数据，但它会实时过滤。我的问题是如何使其不实时，比如当搜索栏为空时，它会获取所有数据，但当在搜索栏中键入文本时，它将从输入文本中获取数据。

这是我的代码

const { data, loading, error } = useFetch(BASE_URL)
const [search, setSearch] = useState("")
const [inp, setInp] = useState("")
const handleChange = (e) => {
setSearch(e.target.value)
}
if (loading) return <h1> LOADING...</h1>
if (error) console.log(error)
return (
<div className="App" >
<div className="Container">
<label className='header'>Topic</label>
<div className="Container-searchBar">
<input type="Text" value={search} placeholder="Search . . ." onChange={handleChange}/>
</div>
{data.filter((val) => {
if (search === "") {
return val
}
else if (val.tags.includes(search)) {
return val
}
}).map((post) => {
return 
.
My return
.
})}
</div>
</div>
);

我是React和JS的新手，很抱歉问了一些不好的问题。

Answer 1

我没有理解你所说的非实时过滤。你的方法是可以的，如果你不想立即应用过滤器，你可以应用超时。

const { data, loading, error } = useFetch(BASE_URL);
const [search, setSearch] = useState("");
const [filteredStates, setFilteredStates] = useState([]);
useEffect(() => {
setFilteredStates(data);
const timer = setTimeout(() => {
const filter = data.filter((state) => {
return state.tags.includes(search);
});
setFilteredStates(filter.length ? filter : data);
}, 300);
return () => clearTimeout(timer);
}, [search, data]);
const handleChange = (e) => {
setSearch(e.target.value);
};
if (loading) return <h1> LOADING...</h1>;
if (error) console.log(error);
return (
<div className="App">
<div className="Container">
<label className="header">Topic</label>
<div className="Container-searchBar">
<input
type="Text"
value={search}
placeholder="Search . . ."
onChange={handleChange}
/>
</div>
{filteredStates.map((post) => {
return;
<></>;
})}
</div>
</div>
);

Answer 2

这不是你想要的完整答案，但通常你必须为你的过滤器应用条件触发器，例如

const onSearchPress = () => {somehowQueryYourData ...... setSearchState(true)}

然而，到目前为止，我给你的信息有一个问题，我现在正面临这个问题：一旦触发onSearchPress，setSearchState(true(就不会关闭，它最终会创建一个实时过滤器。希望你能在此基础上再接再厉。