React Redux组件条件渲染问题：未登录时仍显示文本

你的核心问题是未登录时username的初始值不符合预期，导致条件判断失效：

为什么会出现这个问题？ #

如果你的authSlice中，未登录时username的初始值是空字符串''，或是被误设为了真值（比如空对象{}），就会导致条件判断username && <div>...</div>始终为真，div一直被渲染——未登录时username为空，所以显示“Hello: ”，登录后才填充真实用户名。

解决方法 #

方法1：修正authSlice的初始状态（推荐）

确保未登录时username是null或undefined这类明确的假值：

// authSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const doSignInAsync = createAsyncThunk(
  'auth/doSignInAsync',
  async () => {
    // 模拟登录接口返回的用户名
    return 'Michael';
  }
);

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    username: null, // 未登录时设为null
    // 可添加其他状态：loading, error等
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(doSignInAsync.fulfilled, (state, action) => {
      state.username = action.payload;
    });
  }
});

export const selectUsername = (state) => state.auth.username;

export default authSlice.reducer;

修改后，你原有的条件判断{username && <div> Hello: {username} </div>}就能正常工作：未登录时username为null，条件不成立，不渲染div；登录后username变为'Michael'，条件成立，渲染目标文本。

方法2：强化条件判断（无需修改状态）

如果无法调整初始状态，直接修改组件中的条件判断，过滤空字符串、空格等无效值：

// 替换原有的条件渲染代码
{username?.trim() && <div> Hello: {username} </div>}

或者更严谨的写法：

{username && username.length > 0 && <div> Hello: {username} </div>}

这两种写法都会确保只有拿到真实有效的用户名时，才会渲染目标div。

内容的提问来源于stack exchange，提问作者Michael Schetzer