firestoreConnect 不会将集合映射到 react-redux-firebase 中的状态答案

【问题标题】：firestoreConnect doesn't map collection to state in react-redux-firebasefirestoreConnect 不会将集合映射到 react-redux-firebase 中的状态
【发布时间】：2021-02-13 07:35:19
【问题描述】：

我正在尝试将我在 firestore 中的赠品集合映射到我在 Shop.js 中的道具，但 firestoreConnect 没有做任何事情。当我在 mapStateToProps 中打印出 state.firestore.ordered 时，我得到了 Object{}，而 state.firestore.ordered.giveaways 是未定义的。

我的配置有问题吗？ react-redux-firebase 文档让它看起来一切都在这里。

Shop.js

    const giveaways = state.firestore.ordered.giveaways;
    console.log("=====================================================");
    console.log(giveaways);
    return {
        profile: state.firebase.profile,
        giveaways: state.firestore.ordered.giveaways
    }
}

export default compose (
    firestoreConnect(() =>{
        {collection: 'femaleClothes'}
    }),
    connect(mapStateToProps),
    )(Shop);

fbConfig.js 看起来像这样

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'


var firebaseConfig = { /*firebase config information*/};
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  //firebase.analytics();
  firebase.firestore();

  export default firebase;

以及App.js的相关部分


const store = createStore(rootReducer, 
  compose(
      applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore})),
      reduxFirestore(fbConfig)
    )
  );


const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true
}

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance,
}
export default function App() {
    return (
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <AuthIsLoaded>
            <NavigationContainer>
              <AuthNavigator/>
            </NavigationContainer> 
          </AuthIsLoaded>
        </ReactReduxFirebaseProvider>
      </Provider>
    );
};

【问题讨论】：

有没有可能应该是state.firebase.ordered 而不是state.firestore.ordered？

标签： reactjs react-native redux react-redux-firebase

【解决方案1】：

我在您的配置中看不到错误。我最近遇到了同样的问题，终于设法解决了。这是 mapStateToProps 和导出：

const mapStateToProps = (state) => {
  return {
    sections: state.firestore.ordered.sections,
    auth: state.firebase.auth
  }
}

export default compose(
  connect(mapStateToProps),
  firestoreConnect(
    [{collection: 'sections'}]
  )
)(ShowSection);

为了在你的组件中使用：

//if it's functional component
//const section = props.section
//if it's class component (I mention it just in case)
const sections = this.props.sections
// in my render method, make sure the sections is fetched
{sections && sections.map( section =>{
     return <Template
     key={section.id} 
     title={section.title}
     icon="edit"
     link={`/section/${section.id}`}
     btnTxt="Rediger"
     info={section.info}
 ></Template>
 })}

我也在另一个项目中尝试过，问题就像你提到的那样：section.map() 不是一个函数。这是因为返回的对象。在此之后，只需 console.log 您的返回对象。如果它是一个数组，则此 .map() 方法将起作用。但如果是 JS 对象，.map 或 .forEach 将不起作用。您必须按如下方式迭代您的对象，而不是这些方法：

//func component
const Overview = (props) => {
const sections = props.sections
return(
<div>
{sections && Object.entries(sections).map(section =>(
//items id
<h1>{section[0]}</h1>
//items keys (whatever you have in your collection's document's fields)
<h1>{section[1].title}</h1>
<h1>{section[1].info}</h1>
))}
</div>
)
}

但是 react-redux-firebase v.3.0.0 的问题，文档说：

export default compose(
  firestoreConnect(() => ['todos']), // sync todos collection from Firestore into redux
  connect((state) => ({
    todosList: state.firestore.data.todos
  })
)(SomeComponent)

我想强调一下：state.firestore.data.todos旧版本是 state.firestore.todos

我试图解释问题和解决方案，希望对您有所帮助。

【讨论】：