在回调中响应自定义挂钩
在回调中响应自定义挂钩
提问于 2019-11-12 15:22:07
我试图在回调逻辑中使用我的自定义钩子，如下所示：
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 "useDataChange“不能在回调中调用。必须在React函数组件或自定义React函数React /rules of Hooks中调用react。
当表数据被更改时，如何使用它？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-12 15:44:01
理解钩子的关键是从组件中提取反应代码片段。因此，您的第一步将是让它在组件中工作。
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}
/>
);
};这里有一个存在于组件逻辑之外的钩子，所以它现在可以进入它自己的文件，并在您的项目中使用。
Stack Overflow用户
发布于 2019-11-12 16:22:06
就像上面说的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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58821668
复制相关文章
相似问题
腾讯云开发者
