javascript - 无法将组件连接到 redux 商店

Question

在我的个人资料页面中，我有 3 张卡片，这意味着 3 个反应组件。

我是 React.js 的新手，最近在我的应用程序中设置了 redux。所以问题是其中两张（卡）成功连接到redux store，但第三张卡由于未知原因无法连接，请您帮帮我吗？

Redux 商店仅undefined返回Card3.js

Hero.js（简介）

    import React, { useState, useEffect } from "react"
    import FadeIn from 'react-fade-in';
    import { Redirect } from 'react-router-dom'
    import { Container, Row } from 'react-bootstrap'
    import { getUserProfile } from "../../services/user.service";
    import { connect } from "react-redux";

    import './profile.css'
    import LCard1 from "./cards/card1/LCard1"
    import Card1 from "./cards/card1/Card1"
    import Card2 from "./cards/card2/Card2"
    import Card3 from "./cards/card3/Card3"

    const Hero = (props) => {
        const [userInfo, setUserInfo] = useState({username: ''})
        const [isLoading, setIsLoading] = useState(true)

        const getUser = async () => {
            console.log()
            await getUserProfile(props.uid)
                .then(res => {
                    setUserInfo(res)
                    setIsLoading(false)
                })

        }

        useEffect(() => {
            if (userInfo)
                getUser()
        }, [])

        return (
            <>
                <FadeIn transitionDuration={1000}>
                    {props.authenticated ? (
                        <section className="profile-cards">
                            <Container fluid >
                                <Row>
                                    {isLoading ? (
                                        <LCard1 />
                                    ) : (
                                        <Card1 user={userInfo} />
                                    )}
                                    <Card3 />
                                </Row>
                                <Row>
                                    <Card2 />
                                </Row>
                            </Container>
                        </section>  
                    ) : (
                        <Redirect to="/signin" />
                    )}
                </FadeIn>
            </>
        )
    }

    const mapStateToProps = (state) => {
        return {
            uid: state.authReducer.uid,
            authenticated: state.authReducer.authenticated
        }
    }

    const mapDispatchToProps = (dispatch) => {
        return {
            logout: () => {
                dispatch({
                    type: 'SIGNOUT_SUCCESS'
                })
            }
        }
    }

    export default connect(
        mapStateToProps, 
        mapDispatchToProps
    )(Hero)

Card3.js

    import React from 'react'
    import { connect } from "react-redux";

    import CreateAdvertisement from './content/create.advert/CreateAdvertisement'
    import MyMessages from './content/my.messages/MyMessages';
    import MySettings from './content/my.settings/MySettings';
    import MyVerfifcation from './content/my.verif/MyVerfifcation';

    import './card3.css'

    const Card3 = (props) => {
        
        return (
            <div>
                <p>Test: {props.username}</p>
                <section className="card3">
                    <div className="card3-box">
                        <div>
                            <MySettings />
                        </div>
                    </div>
                </section>
            </div>
        )
    }

    const mapStateToProps = (state) => {
        return {
            key: state.authReducer.username
        }
    }

    export default connect(
        mapStateToProps
    )(Card3)

store.js

    import { configureStore } from '@reduxjs/toolkit'
    import { persistReducer } from 'redux-persist'
    import storage from 'redux-persist/lib/storage'
    import thunk from 'redux-thunk'
    import reducers from './reducers/root.reducer'

    const persistConfig = {
        key: 'root',
        storage: storage,
        blacklist: ['sidebarReducer']
    }

    const persistedReducer = persistReducer(persistConfig, reducers)

    const store = configureStore({
        reducer: persistedReducer,
        devTools: process.env.NODE_ENV !== 'production',
        middleware: [thunk]
    })

    export default store

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'
import store from './store/store'

let persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

标签： javascriptreactjsredux

Answer 1

import React, { Component } from 'react';
import { View, Text,ScrollView } from 'react-native';
import { Provider } from 'react-redux'
import store from './src/Redux/Store'
import MainNavigation from './src/components/Navigation/Navigation';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <Provider store={store}>
           <MainNavigation/>
      </Provider>
      
    );
  }
}

export default App;

首先，您的所有屏幕都应该在导航下

遵循此代码这对您有用，谢谢。