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

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 Hook。(反应钩子/钩子规则(

我怎样才能实现这样的模式？ 即想要创建一个反应组件列表并从中返回它们的有状态值，而无需使用 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
}
}

我不确定您将提供的参数类型，因此，由您来初始化参数中的元素列表。