Javascript 为什么会创建无限循环？

我正在尝试使用React钩子对数据创建一个过滤器。我真的不明白为什么在调用setEnteredFilter时，这段代码会创建一个无限循环。LoadedData是一个包含一些对象的数组，我只想要id与我在搜索栏中输入的内容匹配的对象

const [enteredFilter, setEnteredFilter] = useState("");

  useEffect(() => {
    fetch("userConf_user.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then(function (response) {
        return response.json();
      })
      .then(function (responseData) {
        let users = responseData.result.user;
        const loadedData = [];
        for (let obj in users) {
          loadedData.push(users[obj]);
        }
        onLoadUsers(loadedData); 

        setEnteredFilter(
          loadedData.filter((User) => {
            User === loadedData.map((user) => user.id);
          })
        ); 
      });
  }, [enteredFilter, onLoadUsers]);

  return (
    <section className="search">
      <Card>
        <div className="search-input">
          <label>search by Id: </label>
          <input
            type="text"
            value={enteredFilter}
            onChange={(Event) => setEnteredFilter(Event.target.value)}
          />
        </div>
      </Card>
    </section>
  );
});

const[enteredFilter，setEnteredFilter]=useState（“”）；
useffect（（）=>{
获取（“userConf_user.json”{
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”，
},
})
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（响应数据）{
让用户=responseData.result.user；
常量loadedData=[]；
for（让obj进入用户）{
loadedData.push（用户[obj]）；
}
onLoadUsers（loadedData）；
设置输入过滤器(
loadedData.filter（（用户）=>{
User===loadedData.map（（User）=>User.id）；
})
); 
});
}，[enteredFilter，onLoadUsers]）；
返回(
按Id搜索：
setEnteredFilter（Event.target.value）}
/>
);
});

从

useffect

的依赖项数组中删除

enteredFilter

，[/*删除此输入的筛选器，*/onLoadUsers]）；

该值未在

useffect

中引用，但由于该值发生更改，该效果将再次运行，从而导致无限循环

---

我建议使用ESLint和插件。在这种情况下，它会通知您，

enteredFilter

未在挂钩中引用，因此应从依赖项数组中删除。

从

useffect

的依赖项数组中删除

enteredFilter

，[/*删除此输入的筛选器，*/onLoadUsers]）；

该值未在

useffect

中引用，但由于该值发生更改，该效果将再次运行，从而导致无限循环

---

我建议使用ESLint和插件。在这种情况下，它会通知您，

enteredFilter

在钩子中没有引用，因此应该从依赖项数组中删除。

因此存在无限循环，因为您的效果取决于enteredFilter。因此，当修改enteredFilter时，效果将重新运行。您可以通过不将该依赖项包含在数组中来删除该依赖项，因为您无论如何都不会使用它，因此存在一个无限循环，因为您的效果取决于enteredFilter。因此，当修改enteredFilter时，效果将重新运行。您可以通过不将该依赖项包含在数组中来删除该依赖项，因为您无论如何都不会使用它

当您在useEffect的数组参数中放入某个内容时，就好像您告诉React在该数组中提到的任何内容发生更改时“刷新”组件一样

因此，在您的情况下，useEffect会更改

enteredFilter

的值，这会触发刷新，从而导致useEffect再次运行，依此类推

---

如果将其从数组中删除，它应该可以正常工作。

当您在useEffect的数组参数中放入某些内容时，就好像您在告诉React，只要此数组中提到的任何内容发生更改，就“刷新”组件一样

因此，在您的情况下，useEffect会更改

enteredFilter

的值，这会触发刷新，从而导致useEffect再次运行，依此类推

---

如果您从数组中删除它，它应该可以正常工作。

您不断更新它所依赖的内容，因此它会不断调用它。您不断更新它所依赖的内容，因此它会不断调用它。