回调中的React自定义挂钩

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被触发时(，应该触发自定义钩子。相反，我得到了：

React Hook"useDataChange"不能在回调中调用。React钩子必须在React函数组件或自定义React钩子函数React钩子/钩子规则中调用

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

Answer 1

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

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;