javascript - 如何在 UseEffect 中使用 prop 函数？

Question

我想在 UseEffect 中调用一个 prop 函数。以下代码有效:

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

但是 lint 提示 props不是依赖。

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

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

如何解决 Lint 问题？

示例代码:

父组件

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

我在这里看到很多奇怪和不正确的答案，所以我觉得有必要写这个。
将函数添加到依赖项数组时达到最大调用深度的原因是它没有稳定的标识。在 React 中，如果您不将函数包装在 useCallback 中，则会在每次渲染时重新创建函数。钩。这将导致 react 看到你的函数在每次渲染时都发生了变化，因此每次都会调用你的 useEffect 函数。
一种解决方案是将函数包装在 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 Prop 在每次渲染时都不会改变)