使用平面列表和钩子对本机分页进行搜索。
使用平面列表和钩子对本机分页进行搜索。
提问于 2022-03-21 13:50:59
使用搜索键send作为参数来响应本机搜索，而Api调用是在搜索中输入文本填充的，同时使用Flatlist和钩子对本机分页作出反应，问题是我在加载下一页时添加了数据，但是在seach键输入时它存储了以前的值。
回答 1
Stack Overflow用户
发布于 2022-03-24 01:20:26
输入搜索时，首先应该重置数据状态: setData([])。setData也是异步和api请求，那么，就有可能比重置失败几次。出于这个原因，我在useRef中使用标志，以同步方式写入和读取值，例如：
const resetData = useRef(false)输入过滤器时：
resetData.current=true在.then api req上：
if(resetData.current){
setData(response.data);
resetData.current = false
}
else{
setData([...data,response.data])
}编辑(在评论后)：
import React, { useState, useEffect, useRef } from "react";
//..other imports
function App() {
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
const [searchKey, setSearchKey] = useState();
const resetData = useRef(false);
const getData = () => {
let pageToReq = page;
if (resetData.current) {
pageToReq = 0;
}
const headers = { Authorization: "token" };
axios
.get("baseurl" + "getdata?page=" + pageToReq, { searchingKey: searchKey })
.then(async function (response) {
if (resetData.current) {
setData(response.data);
resetData.current = false;
} else {
setData([...data, ...response.data]);
}
})
.catch(function (error) {
console.log(error);
});
};
useEffect(() => {
getData();
}, [page, searchKey]);
const handleOnChangeText = (val) => {
resetData.current = true;
setSearchKey(val);
};
const handleOnEnd = () => {
if (resetData.current) {
return;
}
setPage(page + 1);
};
return (
<View>
<TextInput onChangeText={handleOnChangeText} />
<FlatList
data={data}
onEnd={handleOnEnd}
onEndReachThreshold={0.1}
></FlatList>
</View>
);
}
export default App;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71558766
复制相关文章
相似问题
腾讯云开发者
