Javascript 如何在UseEffect中使用道具功能？

我想在UseEffect中调用一个prop函数。以下代码起作用：

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

但是林特抱怨

道具
不是一个依赖项

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

  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]);

添加
props.handleClick
作为依赖项

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

你应该在道具之外解构
handleClick

在组件开始时，您可能会遇到如下情况：

constmycomponent=（道具）=>

改为

constmycomponent=（{handleClick，id}）
基本上你可以拿出任何你知道的道具作为它们的实际名称

然后像这样使用下面的代码：

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

或者，您可能实际上不需要将函数作为依赖项，因此这应该是可行的

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

使用
this
作为null调用函数，如下所示：

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

只要props.handleClick没有指向使用
此选项的函数或方法，一切都应该按预期工作。
我尝试了此选项，但仍然出现错误：警告：超过最大更新深度。当组件在useEffect内调用setState时，可能会发生这种情况，但useEffect没有依赖项数组，或者在每个RenderId上都有一个依赖项更改，您将它指向函数
props.handleClick
。。不是
props
？当您将
handleClick
作为
prop
传递给此组件时，它也是一个内联函数吗？这不是
useffect
的正确用例。在
useffect
dependency中，您只需放置重要位置即可更改值。如果在重新渲染之间某些值没有更改，则响应跳过应用效果。如果
handleClick
是一个在父组件中具有
useCallback
的记忆函数，则不会触发此
useffect
，因为
handleClick
引用不会更改-当
useffect
运行时，哪个IMHO是更好的控制方法。禁用lint是否会引入更多的bug，因为它实际上使用了
handleClick
函数？请参见此处：。我使用这一行
//eslint禁用下一行react hooks/deps
您不需要将不重要的更改放入useEffect依赖项列表中。是什么触发了组件中id的更改？您可能不必使用
useffect
来实现您的目标。@Hangindev谢谢您的提示，我对它进行了重构以避免
useffect
@SAKURA不客气。要让您知道最大重新渲染错误的原因，是因为
handleClick
触发了
ParentGrid
中的状态更改，从而导致重新渲染，并创建了一个新的
handleClick
函数，并导致在
ChildGrid
箭头内重新运行
useffect
的回调。。。♻ 为了避免这种情况，重构是一种解决方案，或者您可以使用@iamaatoh建议的
useCallback
创建一个记忆化的
handleClick
函数。所以这对我仍然不起作用，我试图在使用effect之前拉出函数：
const{data，handleClick，…rest}=props
；如果我没有将其添加到依赖项数组中，lint会抱怨“React Hook useffect缺少依赖项：'handleClick'。包括它或删除依赖项数组React hooks/deps”。如果我这样做，那就是超出了最大更新深度error@SAKURA为什么要将
handleClick
传递给
useffect
这听起来像是应该调用的函数类型
onClick
？命名不好，但基本上，每当用户在网格中选择一行时，该函数都会将一些数据传递给父组件。我最终重构了代码以避免useEffect，避免lint错误