.map () для итерации массивов объектов

Question

Я попытался использовать вложенный подход, который может отображаться в журнале консоли, но не может отображаться на главной странице Tsx в реакции.

Структура данных выглядит следующим образом:

• массив [0] = {title: "ab c", url: "ab c .com"};
• array [1] = {title: "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 Uncaught TypeErayror: [object ] не является функцией

Answer 1

На основании приведенных данных вам не нужна функция вложенной карты. Вы можете достичь этого с помощью одной карты.

Пример:

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

Внешний вызов карты ожидает функцию, и вы передаете ей результат внутренней карты, которая возвращает массив, а не функцию.