Блог

Я не знаю, почему я продолжаю получать следующую ошибку: ‘IsAuthenticated’ не определен no-undef. Я взял его из mapStateToProps, а затем вызвал его в своем теге switch. Любая помощь будет оценена. Спасибо.

//App.js файл

 const App = () => {
    useEffect(() => {
        store.dispatch(loadUser());
    }, []);
    return (
        <Provider store={store}>
            <div className="App">
                <Router>
                    <Switch>
                        <Route exact path="/" component={LandingPage} />
                        {!isAuthenticated ? <Route exact path="/login" component={LoginPage} /> : <ProtectedRoute exact path="/userfeed" component={UserFeed} />}

                    </Switch>
                </Router>
            </div>
        </Provider>
    );
}

const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(App);
  

Он isAuthenticated будет передан как реквизит компонента, вам нужно получить его из реквизита компонента, и вы должны определить поставщика в родительском компоненте.

Попробуйте приведенный ниже код.

 const App = ({ isAuthenticated }) => {
    useEffect(() => {
        store.dispatch(loadUser());
    }, [])
    return (
        <div className="App">
            <Router>
                <Switch>
                    <Route exact path="/" component={LandingPage} />
                    {!isAuthenticated ? <Route exact path="/login" component={LoginPage} /> : <ProtectedRoute exact path="/userfeed" component={UserFeed} />}
                </Switch>
            </Router>
        </div>
    );
};
const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps)(App);
  

index.js

 import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import App from './App'
import store from './store'
ReactDOM.render(
    // Render a `<Provider>` around the entire `<App>`,
    // and pass the Redux store to as a prop
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
)

  

Для получения подробной информации, пожалуйста, прочитайте руководство в официальном документе здесь.