useEffect清除，然后重新填充我的反应钩子

Question

我有两个使用的状态数组将调用它们查询和消息。

const [queries, setQueries] = useState([]);
const [messages, setMessages] = useState([]);

我有它，所以当用户输入搜索查询时，它会将查询添加到屏幕上的查询列表中。当用户删除其中一个查询或添加新查询时，我的使用状态将读取列表中的最后一个查询，并在 useEffect 中运行提取请求。

useEffect(() => {
if (queries.length > 0) {
const [x] = queries.slice(-1);
axios
.get(`FETCH REQUEST`)
.then((res) => {
setMessages(res.data.messages);
})
.catch((err) => {
console.log(err);
});
} else {
setMessages([]); // <-- this right here is my problem!
}   
}, [queries]);  

问题是一切都按预期工作，直到数组中没有项目。它将短暂返回一个空消息数组，然后以某种方式获取请求最后一个删除的项目。我可以得出的结论是，这就是问题所在，但我不明白为什么或如何，尽管试图以各种方式强迫我的结果。提前感谢您的任何帮助！

Answer 1

如果需要，setState 函数异步工作，将加入多个请求，无需任何特定顺序即可优化应用性能。这可能会多次触发 useEffect，并错误地设置消息状态。相反，您可以使用回调到 setQuery 调用中设置消息状态。

function cbAddOrDeleteQuery() {
...  
setQueries(_ => {
// newVal represents the updated queries
if (newVal.length > 0) {      
setMessage(res.data.messages);
} else {
setMessage([]);
}
return newVal;
});
}