MUI TextField结合Redux时状态无法更新如何解决？

共有两处核心错误导致Redux状态无法正常更新：

• Slice内状态字段不匹配：initialState中定义的存储钱包地址的字段为wallet，但setWalletAddress reducer中赋值的目标是不存在的state.value，每次dispatch只会新增一个冗余字段，初始定义的wallet字段从未被修改。
• 组件违反React语法与Hook调用规则：useDispatch钩子调用、事件处理函数定义被错误写在return后的JSX表达式块中，既不符合JSX语法规范，也违反了Hook必须在组件顶层、return前调用的规则，dispatch逻辑根本无法正常执行。

1. 修正Slice的状态赋值逻辑 #

将reducer中的赋值目标改为与initialState一致的字段，修正后代码：

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

export const walletSlice = createSlice({
  name: "wallet",
  initialState: {
    wallet: "xxx-xxxx-xxx-xxxx",
  },
  reducers: {
    setWalletAddress: (state, action) => {
      // 原代码错误赋值给state.value，改为对应state.wallet字段
      state.wallet = action.payload;
    },
  },
});

export const { setWalletAddress } = walletSlice.actions;

export default walletSlice.reducer;

2. 修正表单组件结构 #

将Hook调用、事件处理函数全部移到组件顶层、return语句之前，补全必要的依赖导入，修正后代码：

import React from "react";
import { useDispatch } from "react-redux";
import { setWalletAddress } from "../../redux/wallet";
// 注意补全TextField组件的导入，以实际使用的组件库路径为准
import { TextField } from "@mui/material";

export default function AddressForm() {
  // Hook、内部函数统一写在return前的组件顶层作用域
  const dispatch = useDispatch();
  const handleChangeWallet = (event) => {
    dispatch(setWalletAddress(event.target.value));
    console.log(event.target.value);
  };

  return (
    <React.Fragment>
      <TextField
        onChange={handleChangeWallet}
        label="Wallet address"
      />
    </React.Fragment>
  );
}

3. 校验Store配置 #

确认Store中walletReducer的导入路径、命名与Slice的默认导出匹配，正确配置参考：

import { configureStore } from "@reduxjs/toolkit";
// 确认导入路径正确，walletReducer对应walletSlice默认导出的reducer
import walletReducer from "./redux/wallet";

export default configureStore({
  reducer: {
    wallet: walletReducer,
  },
});

修复完成后，在其他页面通过const walletAddress = useSelector(state => state.wallet.wallet)即可获取到实时更新的钱包地址值。

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