Question

我实际上正在开发一个小型React应用，我实际上想将我的组件连接到Firebase，但是该组件包含多个类和多个导出，因此当我应用我的方法（基于一个类组件）时，它什么都不给我，它应该从firestore返回数据。

当我尝试在mapStateToProps上控制台记录状态时，它返回 undefined ：

const mapStateToProps = (state) => {
   console.log("state firebase",state);
   return {
     animationsfb: state.firestore.ordered.animations,
   }
}

那是我的包含多个类的组件：

export class AnimationScreen extends Component {

  render() {
    return (
         <View>
          .........
         </View>
    );
  }
}

const mapStateToProps = (state) => {
    console.log("state firebase",state);
 return {
   animationsfb: state.firestore.ordered.animations,
 }
}

class DetailsScreen extends React.Component {

    render() {

        return (
           <View>
             .........
           </View>
        );
     }
}

const Navigator = FluidNavigator({

        home: {screen: AnimationScreen},
        homeDetails: {screen: DetailsScreen},
},
);

class HomeTransitions extends React.Component {
    static router = Navigator.router;


    render() {
        const {navigation} = this.props;

        return (
            <Navigator navigation={navigation}/>
        );
    }
}
// it was like this before i change it: **export default HomeTransitions**

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

我希望在控制台记录日志时返回状态数据，但是返回未定义。

Answer 1

当前，您正在尝试将所有内容（包括导航器）连接到商店，这可能不是您想要的。

如果您只是在Endpoint=sb://iothub-ns-xxxxxxx.servicebus.windows.net/;SharedAccessKeyName=iothubowner;SharedAccessKey=*******;EntityPath=abc中使用animationsfb，只需将此组件连接到商店，然后将输出用作导航器中的屏幕即可。

AnimationScreen

然后在导航器中

class AnimationScreen extends Component {
  render() {
    return (
      <View>
        // [...]
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  console.log("state firebase", state);
  return {
    animationsfb: state.firestore.ordered.animations,
  }
}

const AnimationScreenConnected = connect(mapStateToProps)(AnimationScreen);

如何正确导出包含多个类的组件

1 个答案: