在回调中反应自定义钩子

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

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