Typescript 和 React 中的嵌套映射返回错误，此表达式不可调用答案

【问题标题】：Nested map in Typescript and React return error this expression is not callableTypescript 和 React 中的嵌套映射返回错误，此表达式不可调用
【发布时间】：2021-05-05 02:01:40
【问题描述】：

我正在使用带有 React 的 Typescript，我想从这个函数返回一些 JSX。我从来没有遇到过嵌套地图循环的问题，但由于某种原因，我现在使用 Typescript 时遇到了错误。像这样进行嵌套循环是不好的做法吗？它给了我一个“这个表达式不可调用”的错误。

更新：代码运行，但 .map 以红色突出显示，它不允许我构建项目。见下图。

const getSelect = () => {
    return <div>
        {
            options.map( (option, index) => {
                return <div>
                    <p>{option.name}</p>
                    {
                        option.values.map( (value) => {
                            return <p>{value}</p>
                        })
                    }
                </div>
            })
        }
    </div>
}

const options: Option[] = [
    {
        name: "categories",
        values: ["cameras", "rolls", "magazine"]
    },
    {
        name: "type",
        values: ["point-and-shoot", "slr", "for beginners"]
    },
    {
        name: "availability",
        values: ["available only"]
    }
]

export type Option = {
  name: string;
  values: string[] | number[];
}

【问题讨论】：

您的代码似乎没有任何问题。可以发一下options的结构吗？
您不检查 option.values 是否为数组。确定 option.values 存在并且是数组类型？
添加检查 option.values.langth > 0 && option.values.map(value => ...
@DeanJames，我发布了期权结构
@Robert，option.values 存在，查看Option结构

标签： reactjs typescript next.js jsx

【解决方案1】：

所以我做了更多的研究并解决了这个问题。我在嵌套地图中添加了联合类型，现在一切正常。

(option.values as (string | number)[]).map( (value) => {
                                    return <p>{value}</p>
                                })

【讨论】：

[...option.values].map().. 也可以 :) 但我认为通过 Array 构造函数声明类型更简洁

【解决方案2】：

喜欢这个

export type Option = {
  name: string;
  values: string[] | number[];
}

【讨论】：