在回调中反应自定义钩子

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;

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

无法在回调中调用 React Hook “useDataChange”。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数 react-hooks/rules-of-hooks 中调用

表格数据发生变化时如何使用？

Answer 1

理解钩子的关键是从组件中提取反应代码片段。所以你的第一步是让它在组件内部工作

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

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

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

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}
    />
  );
};

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

Answer 2

就像它所说的React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks。 React 有这个限制，因此它可以跟踪状态和效果。在您的情况下，您可以定义自定义挂钩以返回执行所需工作的函数，而不是直接在您的挂钩中执行。

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

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

export default useDataChange;

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

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


const SomeComponent = () => {
    const callback = useDataChnage();
    return (
    <Table handleTableChange={callbackdata} />
   );
};

export default SomeComponent;