将功能导出到钩子中

Question

我有一个带有随机函数的组件useRandomizer，我想在主App.js中访问它

在app.js我有以下钩子：

import useRandomizer from './components/useRandomizer'
...
useEffect(
() => {
let rndData = useRandomizer()

随机组件具有以下结构，这给了我错误React Hook "useRandomizer" cannot be called inside a callback.

const useRandomizer = () => {       
let rndData = []
rndData.push(getRandomName())
return rndData
}
export default useRandomizer

但是，如果我像下面所示重新导出，那么这些可以在app,js

中使用

export default {
getRandomName,
... other random functions
}

但另一方面，这在app.js中给我带来了更多问题(下面的代码(。它运行所有随机运行次数与我放置的任何次数一样多。例如，获取随机名称和随机名称 2 和随机名称 3 ->而不是具有 3 个名称的 pne 数组，它给了我 3 个具有 3 个名称的数组。

import useRandomizer from './components/useRandomizer'
...
useEffect(
() => {
let rndData = []
rndData.push(useRandomizer.getRandomName())
rndData.push(useRandomizer.getRandomNameTwo())
rndData.push(useRandomizer.getRandomNameThree())

---

编辑1

这个useEffect是像这样的useReducerdispatch的一部分

。

const Reducer = (state, action) => {
... do stuff
}
const [Dispatch] = useReducer(Reducer, somestate)
useEffect(
() => {
Dispatch(somestate)
let rndData = useRandomizer()

---

编辑2

由于Reducer正在连接数组，因此目标是在新创建的数组中推送随机值。因此，我没有在app.js中使用长代码，而是决定将其移动到新组件中。

Answer 1

这里的问题是使用不带大括号export{}

这就是我的函数必须的样子：

const useRandomizer = () => {       
let rndData = []
rndData.push(getRandomName())
return rndData
}
export default {useRandomizer} //was: export default useRandomizer

因此上面提到的dispatch代码现在可以正常工作

import useRandomizer from './components/useRandomizer'
const Reducer = (state, action) => {
... do stuff
}
const [Dispatch] = useReducer(Reducer, somestate)
useEffect(
() => {
Dispatch(somestate)
let rndData = useRandomizer()

似乎添加{}极大地影响了导入/导出语法。

在这里，您可以阅读更多确切的变化