reactjs - .map() 迭代对象数组

Question

我尝试了一种嵌套方法，该方法能够显示在控制台日志中，但无法在 Tsx 主页面中做出反应。

数据结构如下

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

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

主要的.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 Uncaught TypeError: [object Array] is not a function

Answer 1

根据给定的数据，您不需要嵌套的 map 函数。您可以使用单个地图来实现这一点。

例子：

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在第一个map函数的callback.

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}
)
}

Answer 2

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