为什么会产生无限循环？

Question

我正在尝试使用 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>
  );
});

Answer 1

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

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

该值未在 useEffect 内引用，但由于它改变了效果，将再次运行导致无限循环。

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

Answer 2

所以有一个无限循环，因为你的效果依赖于enteredFilter。所以当enteredFilter修改后效果是re-运行。您可以通过不将其包含在数组中来删除该依赖项，因为您无论如何都不会使用它

Answer 3

当你在 useEffect 的数组参数中放置一些东西时，就像你告诉 React 每当这个数组中提到的任何内容发生变化时 'refresh' 组件。

因此，在您的情况下，useEffect 更改了 enteredFilter 的值，这会触发刷新，导致 useEffect 再次变为运行，依此类推。

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

为什么会产生无限循环？

why is an infinite loop created?

javascript

reactjs

react-hooks

use-effect

react-functional-component