React 和 Redux：Getting is not defined no-undef 错误

Question

我不知道为什么我不断收到以下错误：'isAuthenticated' is not defined 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);

Answer 1

isAuthenticated 将作为组件 props 传递，您需要从组件 props 中获取它，并且您必须在父组件中定义提供程序。

试试下面的代码。

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')
)

详情请阅读官方文档here中的指南。