Question

我敢肯定我对此有错误的理解。我有以下组件

const Comp = () => {
    const filter = 'a';

    useEffect(() => {
      console.log('executing effect');
      loadFriends();
    }, [filter]);


    return (
      <Div>
        {friendsFilter}
      </Div>
    );
  };

现在，根据我的理解，由于useEffect上的依赖项列表是filter的反应，当再次渲染该组件时，该效果是否不起作用？但是它似乎可以运行。我在这里理解错了吗？

Answer 1

如果只希望它运行一次，请为依赖项值使用一个空数组，而不要使用“ [filter]”。

Answer 2

好吧，我已经测试了您的用例，但是它没有调用useEffect块。

这是我测试过的代码。

import React, { useEffect, useState } from "react";

const Comp = () => {
  const [count, setCount] = useState(0);
  const filter = "a";

  useEffect(() => {
    console.log("executing effect");
    //loadFriends();
  }, [filter]);

  return (
    <div>
      Div
      <button onClick={() => setCount(count + 1)}> Click me</button>
      Count: {count}
    </div>
  );
};

export default Comp;

Link to codesandbox 即使更改计数，组件也会重新渲染，但不会调用useEffect块。

loadFriends()中很可能发生了某些事情，它正在更改过滤器的值。

React useEffect，依赖项列表不起作用

2 个答案: