React Redux嵌套组件中Mui TextField无法随状态变更更新

问题核心原因 #

defaultValue是非受控组件的属性，仅在组件首次挂载时生效，后续即使Redux状态更新，已挂载的组件不会同步更新defaultValue。这就是标题、div能正常刷新，但TextField的defaultValue没变化的原因——新增/删除key时，对应TextField是新挂载的，defaultValue能生效；而已存在的key对应的组件不会重新挂载，defaultValue就停留在初始值。

解决方案1：改为受控组件（推荐） #

将TextField改为受控组件，用value绑定状态，同时通过onChange触发Redux状态更新，实现状态与输入框值的同步刷新。

修改代码示例：

// 导入useDispatch
import { useDispatch } from 'react-redux';

// 在组件内获取dispatch实例
const dispatch = useDispatch();

// 渲染部分调整TextField
<TextField
  label={key}  // 按你注释修正label为key
  value={content[key]}
  onChange={(e) => {
    // 调用对应Redux action更新content中key对应的值
    dispatch(my.actions.updateContent({ key, value: e.target.value }));
  }}
/>

解决方案2：强制非受控组件重新挂载（特殊场景使用） #

如果不想改为受控组件，可以给TextField设置动态key，当content[key]变化时，key同步变化，强制React销毁旧组件并挂载新组件，让defaultValue重新生效：

<TextField
  label={key}
  defaultValue={content[key]}
  key={`${key}-${content[key]}`}  // 用key+值作为唯一标识触发重挂载
/>

补充说明 #

你的Redux状态获取逻辑（useSelector搭配自定义相等函数）是正常的，组件能接收到状态更新，问题完全出在defaultValue的非受控特性上。优先推荐受控组件方案，这是React表单的标准写法，能更清晰地控制状态流向。

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