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())

edit1

此useEffect是dispatch的{{1}}一部分，

useReducer

edit2

因为reducer连接了数组，所以目标是将随机值推入新创建的数组中。因此，我决定将其移至新组件中，而不是在const Reducer = (state, action) => { ... do stuff } const [Dispatch] = useReducer(Reducer, somestate) useEffect( () => { Dispatch(somestate) let rndData = useRandomizer()中添加较长的代码。

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()

似乎就像添加{}一样，大大增加了导入/导出语法。

Here you can read more what exactly changes

将功能导出到挂钩

1 个答案: