React Custom Hook with Context and Typescript：“Option”类型上不存在属性“map”答案

【问题标题】：React Custom Hook with Context and Typescript: Property 'map' does not exist on type 'Option'React Custom Hook with Context and Typescript：“Option”类型上不存在属性“map”
【发布时间】：2020-05-21 16:38:04
【问题描述】：

我正在开发一个 React 应用程序，该应用程序包含一个可通过 Context 获得的自定义 Hook。该应用使用 Typescript 并定义了自定义类型，例如 Option，它是一个表示 Radio 元素或 Checkbox 状态的对象。

一般来说，这些是代码遵循的步骤：

在包含自定义状态挂钩的组件树顶部创建上下文
自定义挂钩包含自定义 Typescript 类型（选项）
在树的下方，组件读取自定义状态挂钩以呈现 Radios 或 Checkboxes

首先，它定义了带有上下文的自定义钩子，以使其可用于其余组件。它还包括自定义 Option 类型：

import React from "react";

// Custom Option type
export type Option = {
    name: string;
    enabled: boolean;
    checked: boolean;
};

const FiltersContext = React.createContext<Option[] | null>(null);

function useFilters() {
    const context = React.useContext(FiltersContext);
    if (!context) {
        throw new Error(`useFilters must be used within a FiltersProvider`);
    }
    const [filters, setFilters] = context;

    return {
        filters,
        setFilters
    };
}

function FiltersProvider(props: any) {
    // Prepare default options array
    const options: Option[] = [
        {
            name: "Option 1",
            enabled: true,
            checked: true
        },
        {
            name: "Option 2",
            enabled: true,
            checked: false
        }
    ];

    // Assigns default options
    const [filters, setFilters] = React.useState<Option[]>(options);
    const value = React.useMemo(() => [filters, setFilters], [filters]);

    return <FiltersContext.Provider value={value} {...props} />;
}

export { FiltersProvider, useFilters };

稍后在树上和树下，我有一个组件可以读取该自定义挂钩的状态。问题来了：

import * as React from "react";
import { Option, useFilters } from "../../context/use-filters";

const Options: React.FC = () => {
    const { filters } = useFilters();

    return (
        <Wrapper>
            {filters.map((option: Option, key: number) => (
                <OptionWrapper key={key}>
                    <RadioButton defaultChecked={false} name={option.name} disabled={false} onClick={() => {}} />
                    <Label>{option.name}</Label>
                </OptionWrapper>
            ))}
        </Wrapper>
    );
};

export default Options;

代码从useFilters获取filters，然后通过它们map创建RadioButton组件。打字稿抱怨说：

Property 'map' does not exist on type 'Option'

所以，据我了解，filters 被检测为 Option 类型，而不是选项数组。

如果我在return 之前循环遍历filters，选项会出现在控制台上，但 Typescript 仍然会抱怨该错误：

filters.map((option: Option) => console.log(option.name));

我确定我误解了一些非常重要的东西，所以我请你提前原谅，但如果你能对此有所了解，我将非常感激！

再次感谢！

【问题讨论】：

标签： javascript reactjs typescript react-hooks react-context

【解决方案1】：

你的上下文类型错误，应该是这样的：

const FiltersContext = React.createContext<[Option[], Dispatch<SetStateAction<Option[]>>] | null>(null);

您的上下文意味着您只返回过滤器作为您的上下文值，但您也返回 setFilters 函数，因此您也需要考虑这一点。 setFilter 的输入来自：

import { Dispatch, SetStateAction } from 'react';

【讨论】：