.map() 迭代 objects 的数组

Question

我尝试了一种嵌套方法，它能够显示在控制台日志中，但无法显示在 React 的 Tsx 主页面中。

数据结构如下

数组[0]={标题:"abc",url:"abc.com"};
数组[1]={标题:"abcd",url:"abcd.com"};

    this.array.map(this.array.map(i => console.log(i.title, i.url)));

main.tsx

public render(): React.ReactElement<IAProps> {
    let render;
    if (this.props.lists) {
      render = this.props.lists.map(
        this.props.lists.map(i => (
          <li>
            <a href={i.url} target="_blank">
              {i.title}
            </a>
          </li>
        ))
      );
    }
return(
  {render}
)
}

我明白了 sp-webpart-workbench-assembly_en-us_3a7c7940cb718e67c2b0e6edfd5b40ff.js:21 未捕获类型错误：[object 数组] 不是函数

Answer 1

外部映射调用需要一个函数，而您将内部映射的结果传递给它，returns 一个数组，而不是一个函数。

Answer 2

根据给定的数据，您不需要嵌套的地图函数。您可以使用单个地图实现此目的。

示例：

public render(): React.ReactElement<IAProps> {
    let render;
    if (this.props.lists) {
        this.props.lists.map(i => (
          <li>
            <a href={i.url} target="_blank">
              {i.title}
            </a>
          </li>
        ))
    }
return(
  {render}
)
}

但是出于某种原因，如果您想要一个嵌套的 map，那么您必须在第一个 map 函数的 callback.[=16= 中调用嵌套的 map ]

public render(): React.ReactElement<IAProps> {
    let render;
    if (this.props.lists) {
      render = this.props.lists.map( item => (
        this.props.lists.map(i => (
          <li>
            <a href={i.url} target="_blank">
              {i.title}
            </a>
          </li>
        ))
      ));
    }
return(
  {render}
)
}

.map() 迭代 objects 的数组

.map() to iterate an arrays of objects

reactjs

object-destructuring