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

【问题标题】：useEffect clears, then refills my react hookuseEffect 清除，然后重新填充我的反应钩子
【发布时间】：2020-05-19 07:33:36
【问题描述】：

我有两个使用过的状态数组，分别称为查询和消息。

  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]);

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

【问题讨论】：

setMsg、setMessage和setMessages应该代表同一个功能吗？
是的，请原谅我的草率。我会快速编辑一下！

标签： reactjs react-hooks use-effect

【解决方案1】：

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

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

    return newVal;
  });
}

【讨论】：