时间戳

首页 > 解决方案 > 在 React 中渲染字典的数组

reactjs - 在 React 中渲染字典的数组

问题描述

我想渲染通过字典分组的数组。但我无法让它工作。

我的代码如下所示：

var dict: { [key: string] : Array<SomeObject>; };

public render(): React.ReactElement<IProps> {
  return (
    <Container>
      {
        this.dict.map((key, idx) =>
          <Row className={styles.dateColumn}>
            <Col sm={12} className={ styles.column }>
            </Col>
          </Row>
        )
      }
    </Container>
  )
}

但我收到以下错误消息：

Cannot invoke an expression whose type lacks a call signature. Type 'SomeObject[]' has no compatible call signatures.ts(2349)

我想遍历标题的键并遍历其数组值以将其呈现在正确的标题下方。

像这样：

- Key 1 
 - Value 1.1 
 - Value 1.2
 - Value 1.3
- Key 2
 - Value 2.1 
 - Value 2.2
 - Value 2.3

标签： reactjstypescript

解决方案

您正在定义一个具有type键string和type值的对象SomeObject[]。

因此，当您编写 时this.dict.map，Typescript 编译器就像您使用this.dict键访问对象一样map（与 不同Array，Object没有map功能）。

this.dict.map返回一个值SomeObject[]，它是一个数组而不是一个函数=它不是call-able。

您可能会发现使用地图更适合您正在尝试做的事情。

推荐阅读