javascript - 在回调中 react 自定义钩子(Hook)

Question

我正在尝试在回调逻辑中使用我的自定义钩子(Hook)，如下所示:

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


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


export default SomeComponent;

我的自定义钩子(Hook)(只是为了简化)看起来像这样:

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

export default useDataChange;

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

React Hook "useDataChange" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

表数据更改时如何使用它？

Answer 1

理解 hooks 的关键是从组件中提取出一些 react 代码。所以你的第一步是让它在组件内部工作

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

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

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

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

所以现在我们有了一些产生副作用的逻辑。现在您可以将其提取到自己的钩子(Hook)中。

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

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