Question

我试图在回调逻辑中使用我的自定义钩子，如下所示：

import React, { useEffect, useState } from 'react';
import useDataChange from '../../hooks/useDataChange';


const SomeComponent = () => {
  return (
    <Table
      handleTableChange={data => useDataChange(data)}
    />
  );
};


export default SomeComponent;

我的自定义钩子（为简化起见）如下所示：

const useDataChange = data => {
  console.log(data);
};

export default useDataChange;

简而言之，自定义钩子应该在更改表中的数据时触发（即，当触发表组件中的handleTableChange时）。相反，我得到了：

不能在回调内部调用反应挂钩“ useDataChange”。必须在React函数组件中或自定义的React Hook函数中调用React Hooks。react-hooks / rules-of-hooks

更改表数据后如何使用？

Answer 1

理解钩子的关键是从组件中提取代码片段。因此，第一步就是要使其在组件内部正常工作

const SomeComponent = () => {
  const [data, setData] = useState([])
  const [modifiedData, setModifiedData] = useState([])

  useEffect(() => {
    //here we're just going to save the current data stream into a new state variable for simplicity
    setModifiedData(data)
  }, [data])

  return (
    <Table
      handleTableChange={setData}
      data={modifiedData}
    />
  );
};

根据您的代码，我看不到您需要钩子或副作用的地方。但是，让我们假设您确实要运行一些简单的副作用：

const useModifiedData = (data) => {
  const [modifiedData, setModifiedData] = useState(data)

  useEffect(() => {
    setModifiedData(data)
  }, [data])

  return modifiedData
}

const SomeComponent = () => {
  const [data, setData] = useState([])

  const modifiedData = useModifiedData(data)

  return (
    <Table
      handleTableChange={setData}
      data={modifiedData}
    />
  );
};

因此，现在我们有一些产生副作用的逻辑。现在，您可以将其提取到自己的钩子中。

{{1}}

这里您的钩子位于组件逻辑之外，因此现在可以放入自己的文件中并在整个项目中使用。

Answer 2

就像说CatMashProject。 React具有此限制，因此它可以跟踪状态和效果。在您的情况下，您可以定义自定义钩子，以返回执行所需功能的函数，而不是直接在钩子中执行。

在这种情况下，您的自定义钩子文件将如下所示-

React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

然后在组件中可以像这样使用它-

const useDataChange = () => data => {
    console.log(data);
};

export default useDataChange;

在回调中反应自定义钩子

2 个答案: