添加if语句后页面未呈现,并使用Selector挂钩


添加if语句和useSelector钩子后,页面未呈现。

这是我的应用程序组件:

import React from 'react';
import Sidebar from "./Sidebar"
import Feed from "./Feed"
import { useSelector } from "react-redux";
import { selectUser } from "./features/userSlice";
import Login from "./Login";
import './App.css';
import Header from './Header';
function App() {
const user = useSelector(selectUser);
return (
<div className="app">
<Header />
{!user 
? ( <Login /> ) 
: (
<div className="app_body">
<Sidebar />
<Feed />
</div>
)
}

{/* Gidgets */} 
</div>
);
}
export default App;

在我将app_body放入if语句并添加以下两个语句后,应用程序组件退出渲染:

const user = useSelector(selectUser);
{!user 
? ( <Login />) 
: (
<div className="app_body">
<Sidebar />
<Feed />
</div>
)
}

如果这是相关的,这是我的userSlice组件:

import { createSlice } from '@reduxjs/toolkit';
const initialState = {
user: null,
status: 'idle',
};
export const userSlice = createSlice({
name: "user",
initialState,
user:null,
reducers: {
login: (state, action) => {
state.value = action.payload;
},
logout: (state) => {
state.user = null;
},
},
});
export const {login, logout} = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;

我试图消除不同的代码片段,但似乎是上面提到的两段代码导致它停止渲染。

我刚刚查看了我的store component:

import { configureStore } from '@reduxjs/toolkit'; 
import userReducer from '../features/userSlice'; 
export const store = configureStore({ reducer: { user: userReducer, }, }); 

我有

count:userReducer而不是user: userReducer这就是问题所在。

非常感谢你们的帮助!

最新更新