使用Redux Toolkit无法在TextField中显示数据求助

我尝试更新数据，但遇到无法将数据显示在TextField中的问题。不过控制台日志和网络请求中都能看到数据，以下是我的代码，请帮忙排查：

Update Form 代码 #

const { id } = useParams();
const dispatch = useDispatch();
const userInfo = useSelector(selectUser);

const [userData, setUserData] = useState(userInfo);

useEffect(() => {
  dispatch(getUser(id));
}, [dispatch, id]);

useEffect(() => {
  if (userInfo) {
    setUserData(userInfo);
  }
}, [userInfo]);

<TextField name="name" value={userInfo?.name || ''} />
<TextField name="email" value={userInfo?.email|| ''} />

User Slice 代码 #

const userSlice = createSlice({
  name: 'user',
  initialState: userInfo: null,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getUser.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(getUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.isError = false;
        state.userInfo = action.payload;
      })
      .addCase(getUser.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.payload;
        toast.error(action.payload);
      })

export const selectUser = (state) => state.user.userInfo;

问题分析与修复方案 #

1. Redux初始状态语法错误

你的User Slice初始状态写法不符合对象语法规则，正确的初始状态需要包含所有用到的字段：

initialState: {
  userInfo: null,
  isLoading: false,
  isSuccess: false,
  isError: false,
  message: ''
}

不完整的初始状态会导致Selector获取值时出现异常，即使请求成功更新了state，组件也可能无法正确感知变化。

2. TextField绑定数据源不一致

代码中声明了userData状态用于存储用户数据，但TextField却直接绑定了Redux中的userInfo。虽然有useEffect同步逻辑，但如果Redux状态更新的时机与组件渲染不同步，就会导致显示异常。建议统一数据源：

• 方案一：直接绑定userData

  <TextField name="name" value={userData?.name || ''} />
  <TextField name="email" value={userData?.email || ''} />
  

• 方案二：移除userData状态，直接使用userInfo

3. 确认Redux返回数据结构

在getUser.fulfilled中添加日志，确认action.payload是否包含name和email字段：

.addCase(getUser.fulfilled, (state, action) => {
  state.isLoading = false;
  state.isSuccess = true;
  state.isError = false;
  state.userInfo = action.payload;
  console.log('返回的用户数据:', action.payload); // 检查数据结构是否正确
})

如果接口返回的字段名称与组件中使用的不一致（比如username而非name），也会导致TextField无数据显示。

4. 检查组件重新渲染触发条件

在组件中添加日志，确认userInfo是否随Redux状态更新而变化：

console.log('当前userInfo:', userInfo);

如果Redux状态更新后组件未重新渲染，可能是Selector的依赖设置有误，或者state更新时没有生成新的引用（不过Redux Toolkit的Immer会自动处理引用更新）。

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