2

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

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

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

控制台错误

未捕获的类型错误：无法读取 Function.mapStateToProps [as mapToProps] 处未定义的属性“设置”

我做错了什么，如何实现我的预期行为？

我按如下方式存储我的 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 存储中。

详细信息标签.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)

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

控制台日志 
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
4

1 回答 1

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,
  }
}
于 2019-01-07T09:26:06.903 回答