添加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
这就是问题所在。
非常感谢你们的帮助!