在反应中使用自定义钩子数组答案

【问题标题】：Using array of custom hooks in react在反应中使用自定义钩子数组
【发布时间】：2020-02-04 09:00:01
【问题描述】：

我制作了一个自定义反应钩子useMyElement，它返回一个JSX.Element 和一些值，即

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

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

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

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

无法在回调中调用 React Hook “useMyElement”。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。 (react-hooks/rules-of-hooks)

我怎样才能实现这样的模式？ IE。想要创建一个反应组件列表并从中返回它们的状态值，而不使用像 redux 这样的东西。

【问题讨论】：

但是 first 将无法使用，但我想没关系。我不同意“不要在钩子里使用钩子”。你总是在钩子里面使用钩子，这几乎就是有钩子的原因。
这里更大的目标是什么？在遵守钩子规则的同时，可能有一些可行的方法来实现这一点。
更大的目标是我的最后一句话：“即想要创建一个反应组件列表并从中返回它们的状态值，而不使用像 redux 这样的东西。”

标签： javascript reactjs typescript react-hooks

【解决方案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 中的元素列表。

【讨论】：