Question

我已经制作了一个自定义反应挂钩useMyElement，该挂钩返回一个JSX.Element和一些值，即

interface HookOutput {
  element: JSX.Element;
  value: any;
}

这很好用，但现在我要使用这些元素和值的列表，即

const hookElements = listOfArgs.map(args => useMyElement(args))

但是我意识到这是意外使用。我也收到以下警告

不能在回调内部调用React Hook“ useMyElement”。必须在React函数组件或自定义的React Hook函数中调用React Hooks。（反应钩子/钩子规则）

如何实现这样的模式？即想要创建一个反应组件列表并从中返回其有状态值，而无需使用redux之类的东西。

Answer 1

在这种情况下，首先，我将对'useMyElement'挂钩进行一些小的更改。 HookOutput的界面如下所示：

interface HookOutput {
    elements: JSX.Element[];
    values: any[];
  }

该钩子将公开元素数组及其对应的值，而不是公开单个元素及其值。

现在，该钩子看起来像这样：

const useMyElements = (args: any[]): HookOutput => {
    const [elements, setElements] = useState<JSX.Element[]>([]);
    const [values, setValues] = useState<any[]>([]);

    useEffect(() => {
        args.map(arg => {
            // initialize elements and values
        })
    }, [])

    return {
        elements,
        values
    }
}

我不确定要提供的args的类型，因此由您决定是否要初始化args中的元素列表。

在React中使用自定义钩子数组

1 个答案: