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

Posted 2023-02-22

【中文标题】Typescript 和 React 中的嵌套映射返回错误，此表达式不可调用

【英文标题】：Nested map in Typescript and React return error this expression is not callable

【发布时间】：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结构

【参考方案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[];