使用AntDesign列表和Firebase Firestore数据进行反应

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 users即可。

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