为什么要创建一个无限循环?

Question

我试图使用React钩子创建一个数据过滤器。我真的不明白为什么这段代码在调用setEnteredFilter时会创建一个无限循环。loadddata是一个数组，其中包含一些对象，我只需要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>
);
});

Answer 1

将enteredFilter从useEffect的依赖数组中移除

, [/* REMOVE THIS enteredFilter, */ onLoadUsers]);

该值没有在useEffect中引用，但是因为它改变了效果，将再次运行，导致无限循环。

我建议使用ESLint和ESLint -plugin-react-hooks插件。在这种情况下，它会通知您enteredFilter在钩子中没有被引用，因此应该从依赖项数组中删除。

Answer 2

所以有一个无限循环，因为你的效果取决于enteredFilter。所以当enteredFilter被修改时，效果会重新运行。你可以通过不把它包含在数组中来消除这个依赖关系，因为无论如何你都不使用它

Answer 3

当你在useEffect的array参数中添加一些内容时，就像你告诉React在这个数组中提到的任何内容发生变化时'刷新'组件。

所以在你的例子中，useEffect改变了enteredFilter的值，这触发了刷新，这导致useEffect再次运行，等等。

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