在列表组件中使用分组数组 - 反应 js答案

【问题标题】：using grouped array in list component - react js在列表组件中使用分组数组 - 反应 js
【发布时间】：2020-06-29 15:53:58
【问题描述】：

我使用 API 得到一个按日期分组的数组，如下所示：

const data =  [
  [
    {
      BookSubject: 'book1',
      createdAt: '2020-06-20T19:02:18.308',
    },
    {
      BookSubject: 'book2',
      createdAt: '2020-06-20T19:02:18.308',
    },
  ],
  [
    {
      BookSubject: 'book3',
      createdAt: '2020-06-10T19:02:18.308',
    },
    {
      BookSubject: 'book4',
      createdAt: '2020-06-10T19:02:18.308',
    },
    {
      BookSubject: 'book5',
      createdAt: '2020-06-10T19:02:18.308',
    },
  ],
  [
    {
      BookSubject: 'book6',
      createdAt: '2020-05-10T19:02:18.308',
    },
  ],
]

这个分组数组是一个（数组的数组）。

我想在单独的列表中显示每个数组（在 ant 设计中使用列表组件）。

我做了什么：

    import React, { useEffect, useState } from 'react';
    import { getBooksList } from '../../services/AuthService';
    import { Book } from '../../interfaces/Book';
    import { List } from 'antd';

    const App = () => {
    const [books, setBooks] = useState<Book[]>([]);

    useEffect(() => {
     getBooksList()
      .then((res) => {
        setBooks(res.data);
      })
      .catch((error) => {
      });
     }, []);

     return (
    <>
      {books.map((data: Book[]) => {
        return (
          <List
            dataSource={data[0]}
            renderItem={(item:Book) => (
              <List.Item>
                <h1>hiii {item.bookSubject}</h1>
              </List.Item>
            )}
          />)
      })}
    </>
     );
     };
      export default App;

在列表datasource 中，我使用data[0] 到达第一个数组。

如果我想遍历这个数组（data[0]、data[1] .. 等）并创建多个等于数组长度的“列表”组件，我应该怎么做？（我在 React 中使用 typescript）。

【问题讨论】：

你做对了，只需要把dataSource={data[0]}改成dataSource={data}，因为dataSource接受一个列表
这解决了我的问题。我只是误解了列表组件的工作原理

标签： javascript reactjs typescript antd

【解决方案1】：

由于您在API 响应中获得的数据是一个分组数组。为了达到你想要的结果，你需要flatten数组。

在使用setBooks 方法之前，您可以通过flattening 数组来实现此目的，方法如下：

useEffect(() => {
     getBooksList()
      .then((res) => {
 
        // flatten the response array and store its output in `flattenedData`
        var flattenedData = [].concat.apply([], res.data);         
 
        // Set the books array with the flattenedData
        setBooks( flattenedData );
      })
  .catch((error) => {
     // log error here
  });
}, []);

这基本上可以让您轻松地映射组件中的书籍数组。

【讨论】：