React useEffect

Question

所以我有一个简单的要做的应用，点击这里链接删除。

我遇到的问题是，在Console > Network中，我得到太多相同的GET请求，所以看起来我有一个无限循环。我可能没有在useEffect中对此进行正确的编码，因为它触发了包含setTodos(数据)的http方法，这使得它再次触发useEffect。

我试图实现的是web应用程序在这一时刻拥有的相同功能，但需要适当的编码：

• 每次用户单击某个类别时获取适当的数据。
• 我还想在每次用户添加/编辑/删除“todo”时触发特定类别的提取，以便实现“实时提要”。

编辑:我现在尝试的是实现useState [test,setTest]。我将setTest(!test)添加到我的功能中：addTodo、removeTodo、markTodo和category btn onClick功能。我还让[test]去执行。数组在我的useEffect中。有时列表更新是正确的，有时根本不正确，有时是错误的(例如:当我标记一个待办事项时，它会被标记/交叉，然后在1秒后就会没有标记)。但如果我刷新页面，就可以了)。

useEffect

useEffect(() => {
  if(filter === 'Completed')
    httpRequestHandler(`${baseAPIurl}/completed`, "GET");
  
  else if(filter === 'Active')
    httpRequestHandler(`${baseAPIurl}/notcompleted`, "GET");

  else
    httpRequestHandler(`${baseAPIurl}/todos`, "GET");

});

这是我的httpRequestHandler函数的一部分

const httpRequestHandler = async (url, type, data) =>
  {
      let request = {}
        
        if(type === 'GET')
        {
            request = {
                method: "GET",
                headers: {"Content-type": "application/json"} 
            };

            await fetch(url, request)
                    .then((response)=> {
                      return response.json();
                    })
                    .then((data)=> {
                        setTodos(data);
                    });

            return;
        }
...........................

}

Answer 1

根据代码的其余部分，您需要调整依赖项数组。

更多信息，如。这里

Answer 2

您是否尝试过将filter添加到依赖数组中，以便只更新筛选器更改？

useEffect(() => { ... }, [filter])

Answer 3

不知道是什么原因导致我的useEffect从一开始就没有触发，我已经尝试过了，但是现在它起作用了(不知道为什么)。我所做的是：

• 实现useState [trigger, setTrigger]
• 在我的httpHandler func (它处理http请求)中，特别是在函数的PUT/DELETE/POST部分中，我使用了fetch(--，-)，我在.then()部件中添加了setTrigger(!trigger)。
• 将[trigger]添加到useEffect依赖项数组