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

时间:2020-02-03 03:36:14

标签: reactjs react-hooks use-effect react-effects

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

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

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


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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

好吧,我已经测试了您的用例,但是它没有调用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()中很可能发生了某些事情,它正在更改过滤器的值。

Read more about useEffect here