使用React，如何将函数从父组件传递给子组件并在useEffect挂钩中运行？

Question

我使用React将函数从父组件传递给子组件，并试图在useEffect()挂钩中运行它。

亲本

function Parent(props) {

  function alertMe() {
    alert('me');
  }

  render (
    <div>
      <Child alertMe={alertMe} />
    </div>
  );
}

儿童

function Child(props) {

  const { alertMe } = props;

  useEffect(() => {
    alertMe();
  }, [alertMe]);

  render (
    <div>
      // stuff
    </div>
  );
}

如果我将alertMe作为子组件的useEffect()中的一个依赖项删除，它只会触发一次，但是我会得到一个警告：

React useEffect缺少依赖项：'alertMe‘。要么包含它，要么删除依赖数组react/react。

alertMe函数只在加载的父组件中定义一次，所以我不明白为什么它会在子组件中无休止地运行。它不会像状态一样发生变化。

如何将alertMe添加为useEffect()依赖项，但仍然只运行一次？

Answer 1

您的Parent每次重新呈现时都会重新声明alertMe。而且，由于alertMe是参照不同的，useEffect在Child中将检测到这一点并重新运行。

最好不要与useEffect的依赖进行斗争(它们是有原因的！)。让我们确保您的alertMe引用相同：

function Parent(props) {

  const alertMe = useCallback(() => {
    alert('me');
  });

  render (
    <div>
      <Child alertMe={alertMe} />
    </div>
  );
}

将useEffect与依赖项列表视为钩子世界中的componentDidUpdate。最好让组件与道具保持同步，而不是忽略外部的更改。