Question

在本机代码中，例如我有一个 2 状态。

const [data, setData] = useState([]);
const [page, setPage] = useState(0);

调用函数时，即搜索函数

search = async() => {
    setData([]);
    setPage(0);
    console.log("Page: " + page); // This will return 0 because of the setPage(0) above, or can call setPage((state)) to wait until page set to 0
}

如果多次调用上面的搜索功能，页面将为0。这是预期的。

但如果这段代码继续，

search = async() => {
    setData([]);
    setPage(0);
    console.log("Page: " + page); // This page will be always increment because fetch then setPage+1 above
    fetch(url)
       .then((response) => response.json())
       .then((json) => { setData(data.concat(json.content)); setPage(page+1); })
       .catch((error) => console.error(error))
       .finally(() => { });
}

日志将是

Page: 1
Page: 2
Page: 3

预期应该总是 Page: 0

问题是，如何设置页面为0，然后fetch url，所以在fetch之前的值总是0。目标很简单，当这个搜索功能触发时，页面必须为0，然后重新获取数据。

Answer 1

由于您总是希望您的页面在获取之前始终为 0，这意味着 setPage(page+1); 应该使 page 为 1，那么您可以执行以下操作：

search = async() => {
    setData([]);
    fetch(url)
       .then((response) => response.json())
       .then((json) => { setData(data.concat(json.content)); setPage(1); })
       .catch((error) => console.error(error))
       .finally(() => { });
}

直接将页面指定为 1 而不是执行 page+1。编辑

const[start,setStart]=useState(false);

useEffect(()=>{
if(start){
setPage(0);
setData([]);
}
},[start])

search = async() => {
    setStart(true);
    console.log("Page: " + page); // This page will be always increment because fetch then setPage+1 above
    fetch(url)
       .then((response) => response.json())
       .then((json) => { setData(data.concat(json.content)); setPage(page+1); })
       .catch((error) => console.error(error))
       .finally(() => { });
    setStart(false);

}

在获取之前反应本机 setState 值

1 个答案: