如何使用 React-Redux-Firebase 从 Firestore 子集合中检索和加载数据？

Question

我想从 Firestore 子集合中获取一个名为 settings 的文档，然后将其作为名为 settings 的变量加载到我的本地组件（和 Redux 存储）中，其值如下：

settings: {
  name: 'Waldo Garply',
  email: 'corge@foogle.net',
  mobile: '555-789-1234',
  timestamp: '1546304499032',
}

相反，我的应用程序无法编译，我在控制台中收到以下错误消息：

console.error

Uncaught TypeError: Cannot read property 'settings' of undefined at Function.mapStateToProps [as mapToProps]

我哪里做错了，我怎样才能达到预期的行为？

我正在按如下方式存储我的 Firestore 数据。

Firestore

.
├── users
|   ├── OGk02kJbQUesTeVhTrLBnERSxrfm
|   |   ├── settings
|   |   |   ├── VrxDnSxpUw6wgX0n9c1FbapmLaLa
|   |   |   |   ├── name: Waldo Garply
|   |   |   |   └── timestamp: 1546304499030
|   |   |   ├── cGVHxSkU3Lcb9WAYWjnJKcLOTYf8
|   |   |   |   ├── name: Waldo Garply
|   |   |   |   ├── email: corge@foogle.net
|   |   |   |   └── timestamp: 1546304499031
|   |   |   ├── qoDYG2xloEvUUhGQyF9zXy9MTMIq
|   |   |   |   ├── name: Waldo Garply
|   |   |   |   ├── email: corge@foogle.net
|   |   |   |   ├── mobile: 555-789-1234
|   |   |   |   └── timestamp: 1546304499032

注意，每次任何设置值更改时，我都会存储所有设置值（包括时间戳）的唯一快照；然后我获取最新设置（按时间戳排序）并加载它。所以我需要 settings 对象上的自动侦听器。

我在我的组件（称为 DetailsTab.js）中使用以下代码尝试连接到 Firestore 以获取数据，然后将其作为 settings 变量加载到我的组件和 Redux 存储中。

DetailsTab.js

function mapStateToProps( state ) {
  console.log('state\n', state);
  return {
    user: state.auth.user,
    // attempted all the following individually
    settings: state.firestore.data.users.settings, // throws error
    settings: state.firestore.ordered.users.settings, // throws error
    settings: state.firestore.ordered.users[0] // throws error
    settings: state.firestore.ordered.users // returns 'users' object
  }
}

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, mapDispatchToProps),
  firestoreConnect(props => {
    return [
      {
        collection: 'users',
        doc: props.user.data.uid,
        subcollections: [
          {
            collection: 'settings',
            limit: 1,
            orderBy: ['timestamp', 'desc',],
            storeAs: 'settings',
          },
        ],
      },
    ];
  })
)(DetailsTab)

以下是我的控制台记录时数据的显示方式。

console.log

state
└── firestore
    ├── data
    |   └── users
    |       └── OGk02kJbQUesTeVhTrLBnERSxrfm
    |           └── settings
    |               └── qoDYG2xloEvUUhGQyF9zXy9MTMIq
    |                   ├── name: Waldo Garply
    |                   ├── email: corge@foogle.net
    |                   ├── mobile: 555-789-1234
    |                   └── timestamp: 1546304499032
    ├── ordered
    |   └── users [Array(1)]
    |       └── 0
    |           ├── id: OGk02kJbQUesTeVhTrLBnERSxrfm
    |           └── settings [Array(1)]
    |               └── 0
    |                   ├── id: qoDYG2xloEvUUhGQyF9zXy9MTMIq
    |                   ├── name: Waldo Garply
    |                   ├── email: corge@foogle.net
    |                   ├── mobile: 555-789-1234
    |                   └── timestamp: 1546304499032

Answer 1

解决方案是添加适当的错误防护，如下所示。

function mapStateToProps( state ) {
  console.log('state\n', state);
  const settings = state.firestore.ordered.users
                && state.firestore.ordered.users[0]
                && state.firestore.ordered.users[0].settings
                && state.firestore.ordered.users[0].settings[0];
  return {
    user: state.auth.user,
    settings,
  }
}

如何使用 React-Redux-Firebase 从 Firestore 子集合中检索和加载数据？

How to retrieve and load data from a Firestore subcollection using React-Redux-Firebase?

reactjs

react-redux

react-redux-firebase