javascript - 使用 AntDesign 列表和 Firebase Firestore 数据使用react

Question

我正在尝试弄清楚如何使用 Ant Design 的列表在 React 应用程序中呈现来自 firestore 的数据。

列表的设置如下:

const data = [
  {
    title: 'Ant Design Title 1',
  },

  <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <List.Item.Meta
          avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
          title={<a href="https://ant.design">{item.title}</a>}
          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
        />
      </List.Item>
    )}
  />

我想尝试将 firebase 数据放入 const 数据中 - 这样标题就可以是 user.name。

在我的组件中，我有:

{loading && <div>Loading ...</div>}
{users.map(user => (
            <li key={user.uid}>

我正在尝试将其转换为与 Ant Design 的列表一起使用，如下所示:

const data = [
    {
      //title: `{user.name}`,
      title: {user.name},

    }
];
<List

    itemLayout="horizontal"
    dataSource={data}
    renderItem={users.map(user => (
    // renderItem={item => (
      <List.Item>
        <List.Item.Meta
        //   avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
          title={item.title}
          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
        />
      </List.Item>
    ))}
  />

当我尝试此操作时，我收到一条错误消息:

TypeError: renderItem is not a function

是否有如何使用 React 将数据放入 Ant Design 列表的示例？

Answer 1

如果您的 firebase users 源是一个对象数组，则只需将其直接添加到 dataSource 属性中即可。

  <List
    itemLayout="horizontal"
    dataSource={users}
    renderItem={item => (
      <List.Item>
        ...
      </List.Item>
    )}
  />