为什么我在渲染这个条件 JSX 时遇到问题？

Question

我在 React 中有条件地显示 JSX 时遇到问题。

我想在用户未登录时显示登录表单，并在用户登录时显示 h1。但是，当我登录时，登录表单会保留并且 h1 不会出现。为什么会这样？

■App.js

import React from 'react';
import Login from './Views/Login/Login';
import { useSelector } from 'react-redux';

function App() {
  const isLoggedIn = useSelector((state) => {
    state.auth.loggedIn;
  });

  return (
  <div>
    <h1>TEST</h1>
    {isLoggedIn && <h1>LoggedIn</h1>}
    {!isLoggedIn && <Login />}
  </div>
  );
}
export default App;

■index.js（商店）

import { configureStore } from '@reduxjs/toolkit';
import authReducer from './auth-slice';

const store = configureStore({
  reducer: { auth: authReducer},
});


export default store;

■auth-slice.js

import { createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: { admin: false, loggedIn: false },
  reducers: {
    login(state, action) {
    const { name, password } = action.payload;
    state.loggedIn = true;
    state.admin = true;
    console.log(name, password, state.loggedIn);
    },
  },
});

export default authSlice.reducer;
export const authActions = authSlice.actions;

Answer 1

当使用arrow functions时，如果你使用花括号那么你必须写一个return语句.

否则，隐含一个函数returns undefined。所以在你的情况下 isLoggedIn 总是未定义的。 falsy value 表示始终显示登录表单。

const isLoggedIn = useSelector((state) => 
    state.auth.loggedIn;
  );

为什么我在渲染这个条件 JSX 时遇到问题？

Why do I have problem rendering this conditional JSX?

jsx

reactjs

redux

react-redux

redux-toolkit