使用Redux修改列表元素：无法传递元素ID至Reducer的问题

看起来你遇到的核心问题是点击编辑按钮时没有把对应组件的唯一标识（ID）传递给Reducer，所以Reducer不知道要修改哪一个元素，最终导致所有组件都被更新了。咱们一步步来修复：

第一步：在渲染EditComponent时传递对应组件的ID和数据 #

你当前的代码里，<EditComponent clicked={this.props.onEditComponent}/>只是把方法传过去了，但没有绑定当前组件的comp和id参数。当点击编辑按钮时，onEditComponent拿到的id是undefined或者错误的值，自然无法正确定位要修改的元素。

修改渲染EditComponent的代码：

const edit = this.props.compons.map((comp, index) =>(
  <div key={comp.id}>
    {/* 绑定当前组件的数据和ID到点击事件 */}
    <EditComponent clicked={() => this.props.onEditComponent(comp, comp.id)}/>
  </div>
));

这样每次点击某个EditComponent的按钮时，都会把当前组件的comp对象和它的唯一id传递给onEditComponent，Reducer就能拿到正确的标识了。

第二步：优化Reducer的匹配逻辑（可选但更可靠） #

你现在Reducer里用的是索引i === action.data.ind来匹配元素，但如果列表有增删操作，索引可能会发生变化，用组件自身的id来匹配会更可靠（毕竟id是唯一标识）。修改Reducer代码：

case actionTypes.EDIT_COMPONENT:
  return {
    ...state,
    components: state.components.map(component => 
      // 用组件的id代替索引进行匹配
      component.id === action.data.ind 
        ? {...component, co: action.data.componentToReducer} 
        : component
    )
  };

如果你的comp.id确实是每个组件的唯一值，这个修改能避免因列表顺序变化导致的错误匹配。

额外检查：确认EditComponent内部正确触发clicked事件 #

还要确保你的EditComponent组件内部，点击按钮时正确调用了传入的clicked方法。比如EditComponent里的按钮应该是：

<button onClick={props.clicked}>编辑</button>

如果这里没有正确触发，那前面的传递也没用。

这样修改后，点击某个组件的编辑按钮时，就能精准传递对应的ID，Reducer也能正确找到要修改的元素，不会再出现所有元素都被修改的情况了。

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