Javascript 在react中使用自定义挂钩数组

我制作了一个定制的react hook

useMeyElement

，它返回一个

JSX.Element

和一些值，即

接口输出{
元素：JSX.element；
价值：任何；
}

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

const hookElements=listOfArgs.map（args=>useMeyElement（args））

但我意识到这是一个意外的用法。我还得到以下警告

不能在回调内调用React挂钩“UseMeyElement”。必须在React函数组件或自定义React钩子函数中调用React钩子。（吊钩/吊钩规则）

---

如何实现这样的模式？也就是说，希望创建一个react组件列表并从中返回它们的有状态值，而不使用redux之类的东西。

在这种情况下，首先，我要对“UseMeyElement”钩子做一个小的更改。 HookOutput的接口如下所示：

接口输出{
元素：JSX.Element[]；
价值：任何[]；
}

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

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

const useMyElements=（args:any[]）：HookOutput=>{
const[elements，setElements]=useState（[]）；
const[values，setValues]=useState（[]）；
useffect（（）=>{
args.map（arg=>{
//初始化元素和值
})
}, [])
返回{
元素，
价值观
}
}

---

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

但是first将不可用，但我想这是可以的。我不同意“不要在钩子里用钩子”的说法。你总是在钩子里用钩子，这几乎就是为什么要用钩子。这里更大的目标是什么？在遵守钩子规则的同时，可能有可行的方法来实现这一点。更大的目标是我的最后一句话：“即，希望创建一个react组件列表，并从中返回它们的有状态值，而不使用redux之类的东西。”