Redux中按钮修改Reducer状态异常：未点保存也更改状态求助

核心问题1：Save按钮的onClick触发时机错误 #

在edit-profile.js的Save按钮代码中，你直接执行了editProfileClickHandler()，这会导致组件渲染时就立即触发dispatch更新状态，而非点击按钮时才触发：

<Link
    className='btn rounded-pill bg-black float-end text-white fw-bold'
    to='/tuiter/profile'
    onClick={editProfileClickHandler()} // 错误：直接调用函数，而非传递引用
> Save
</Link>

修复方式：传递函数引用，去掉调用括号：

<Link
    className='btn rounded-pill bg-black float-end text-white fw-bold'
    to='/tuiter/profile'
    onClick={editProfileClickHandler} // 仅传递函数本身
> Save
</Link>

核心问题2：Redux Reducer直接修改原状态（违反不可变原则） #

在profile-reducers.js中，你直接修改了原state对象的属性：

case 'edit-profile':
    state[0].name = action.name;
    return state;

Redux要求状态不可变，直接修改原state会导致状态更新检测失效，引发异常。修复方式：创建新的状态对象返回：

case 'edit-profile':
    // 复制原数组，对第一个对象做浅拷贝并修改name属性
    return state.map((item, index) => 
        index === 0 ? {...item, name: action.name} : item
    );

额外优化：Input绑定状态值 #

当前input使用defaultValue是单向绑定，建议改为value绑定name状态，确保输入框内容与状态同步：

<input
    className='form-control border-0 p-0'
    value={name} // 替换defaultValue为value
    onChange={(event) => setname(event.target.value)}/>

修改完成后，只有点击Save按钮时才会触发状态更新，点击X按钮返回时不会修改个人页信息。

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