如何在 UseEffect 中使用道具 function？

Question

我想在 UseEffect 中调用一个道具 function。 以下代码有效：

useEffect(() => {
    props.handleClick(id);
  }, [id]);

但是 lint 抱怨props不是依赖项。

如果我这样做，那么代码将不再有效，并且我有最大的重新渲染错误：

  useEffect(() => {
        props.handleClick(id);
      }, [id, props]);

如何解决棉绒问题？

示例代码：

父组件

const ParentGrid = ({rows, columns}) => {

  const [selection, setSelection] = useState(null);

  const handleClick = selectedRows => {
    setSelection(selectedRows.map(i => rows[i]));
  };

  return (
      <ChildGrid
        columns={columns}
        data={data}
        handleClick={handleClick}
      />

子组件

const ChildGrid = props => {
  const {data, handleClick, ...rest} = props;

  useEffect(() => {
    handleClick(selectedRows);
  }, [selectedRows]);

Answer 1

你应该在道具之外解构handleClick

在组件的开头你可能有这样的东西：

const myComponent = (props) =>

改成

const myComponent = ({ handleClick, id })基本上你可以取出任何你知道的道具作为它们的实际名称

然后像这样使用下面：

useEffect(() => {
    handleClick(id);
  }, [id, handleClick]);

或者您可能实际上并不需要 function 作为依赖项，所以这应该可以工作

useEffect(() => {
    handleClick(id);
  }, [id]);

Answer 2

使用 null 调用 function， this所示：

useEffect(() => {
    props.handleClick.call(null, id);
}, [id, props.handleClick]);

只要 props.handleClick 不指向 function 或使用this. .

Answer 3

一种正确的方法是添加props.handleClick作为依赖项并在父项（useCallback）上记忆 handleClick，以便 function 引用不会在重新渲染之间不必要地更改。

通常不建议关闭 lint 规则，因为它可以帮助解决细微的错误（当前和未来）

in your case, if you exclude handleClick from deps array, and on the parent the function was dependent on parent prop or state, your useEffect will not fire when that prop or state on the parent changes, although it should, because the handleClick function has现在改变了。

Answer 4

我在这里看到很多奇怪和不正确的答案，所以我觉得有必要写这个。

将 function 添加到依赖项数组时达到最大调用深度的原因是因为它没有稳定的标识。 在反应中，如果您不将函数包装在useCallback挂钩中，则会在每次渲染时重新创建函数。 这将导致反应看到您的 function 在每次渲染时都已更改，因此每次都调用您的 useEffect function。

一种解决方案是将 function 包装在useCallback中，它在父组件中定义，并将其添加到子组件中的依赖数组中。 使用您的示例，这将是：

const ParentGrid = ({rows, columns}) => {
  const [selection, setSelection] = useState(null);

  const handleClick = useCallback((selectedRows) => {
    setSelection(selectedRows.map(i => rows[i]));
  }, [rows]); // setSelection not needed because react guarantees it's stable

  return (
    <ChildGrid
      columns={columns}
      data={data}
      handleClick={handleClick}
    />
  );
}

const ChildGrid = props => {
  const {data, handleClick, ...rest} = props;

  useEffect(() => {
    handleClick(selectedRows);
  }, [selectedRows, handleClick]);
};

（这假设父组件中的rows道具在每次渲染时都不会改变）

Answer 5

添加props.handleClick作为依赖

useEffect(() => {
  props.handleClick(id);
}, [id, props.handleClick]);