1

我已经设置了 redux 并做出了反应，它们运行良好。我现在想使用钩子 useFirestoreConnect 和 useFirestore() 将来自 firestore 的数据直接同步到 redux 状态。

此代码有效：

function BannerG() {

    const dispatch = useDispatch()
    // const banneAG = useSelector(state => state.banneAG)

    const firestore = useFirestore();
    useFirestoreConnect( props => [{collection : "layoutElements", doc: 'BannerG'}])
    const aa = useSelector(state  => state.firestore.data.layoutElements)
    console.log(aa)

在控制台中打印带有 {BannerG: {H1: blah, H2:Blah blah, …………}} 的对象

但如果我改为使用

function BannerG() {

    const dispatch = useDispatch()
    // const banneAG = useSelector(state => state.banneAG)

    const firestore = useFirestore();
    useFirestoreConnect( props => [{collection : "layoutElements", doc: 'BannerG'}])
    const aa = useSelector(state  => state.firestore.data.layoutElements.BannerG)
    console.log(aa)

当我运行时，返回一个错误，指出 BannerG 未定义。如果我尝试使用以后的一个，aa.BannerG.H1 也会给出错误

任何人都有解决这个问题的想法？

4

1 回答 1

1

我无法在任何参考资料中直接找到它，而只能在示例中找到它。 在此处输入图像描述

似乎 useSelector 需要方括号，例如：

const aa = useSelector(state  => state.firestore.data.layoutElements['BannerG'])

我在示例github react-redux-firebase、react-redux和react-redux-firebase.com 参考中发现了这样的情况。

不幸的是，我目前无法对其进行测试，所以请让我知道它是否有效。

于 2020-01-13T11:30:34.663 回答