Javascript 使用复选框-redux-react将多个项目添加到数组

在我的应用程序中有一个项目列表。每个项目中都有一个复选框。从该列表项中，如果我选中多个项并单击添加按钮“添加选中项”，则这些选定项将添加到另一个列表中。我创建了action和reducer函数，因为它工作正常。但是，它只添加最后检查的单个项目

我尝试根据mruCode（id）将所有选中的项存储到一个数组中，然后单击按钮函数将整个数组调用到另一个数组中。但是，它只发送单个项

操作代码：（到目前为止，我已经尝试了如何在add中确定checkboxstate操作）

减速器功能（添加操作）

组件代码：

export class NewLocationPanel extends React.Component{
    constructor(props){
        super(props);
        this.state={
               open:false,
               configuredList:[]
        };
       this.configLocation = this.configLocation.bind(this);
        this.togglePanel = this.togglePanel.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.allLocations = this.allLocations.bind(this);
        this.clearall = this.clearall.bind(this);
        this.getLocationData = this.getLocationData.bind(this);
        this.handleRemove = this.handleRemove.bind(this);
        this.removeConfigLocation = this.removeConfigLocation.bind(this);
        this.removeLocationAll = this.removeLocationAll.bind(this);
        this.handleChecklocation = this.handleChecklocation.bind(this);
        this.handleCheckedAdded = this.handleCheckedAdded.bind(this);
    }

    // there is other code

    handleChecklocation(mruCode){
        this.props.checkboxState(mruCode)
    }

    handleCheckedAdded(){
        this.props.checkedLocation()
    }

    componentDidMount() {
        this.props.loadData();
        if(this.props.locationData !=null && this.props.locationData!= undefined){
            this.configLocation(this.props.locationData);
        }
      }

    componentDidUpdate(prevProps,prevState){
        if (prevProps.locationData != this.props.locationData){ 
            this.configLocation(this.props.locationData);
        }
    }

   //there are other non-related function

    render(){
        //const{configuredList} = this.state;
        const _labels = store.getLabels();
        let collapsedToggle = this.props.open ? 'collapsed' : ''
        return(
            <div className="panel panel-default">
            <div className="panel-heading" onClick={(e)=>this.togglePanel(e)}>
              <div className="row">
              <div className="col-xs-12 col-sm-8 col-md-6 col-lg-6 panelHeadingLabel">
                     <span>{this.props.title}</span>
                     </div>
                        <div className="pull-right">
                        <span className="defaultHeaderTextColor">{this.state.configuredList.map((loc,index)=><span key={index}>{loc.mruCode} - {_labels[loc.division]} - {loc.country}{index < this.state.configuredList.length-1 ?',\u00A0' : ''}</span>)}
                           <span onClick={(e)=>this.togglePanel(e)} className={this.state.open ? "collapse-chevronn" : "collapse-chevron"} aria-hidden="true"></span>
                   </span>
                    </div>
                </div>
           </div>
              {this.state.open?(
                        <div className="panel-body">
                             <div className="row grid-divider">
                             <div className="col-sm-6">
                             <div className="col-padding"><div className="pos-div"><h3>Locations List</h3><button className="submitSmallBtn1"  onClick={()=>this.handleCheckedAdded()}>Add Checked</button><button style={{ display: this.props.location.length === this.props.conLocations.length ? "none" : "block" }} className="allLargeBtn" onClick={()=>{this.allLocations()}}>Add all locations</button></div><hr/>
                             {this.props.location.map((item,index)=>(
                             <div key={index}><div><input type="checkbox" onClick={()=>this.handleChecklocation(item.mruCode)}/><label></label><b>{item.mruCode} - {_labels[item.division]} - {item.country}</b>{!this.props.conLocations.find(item2 => item.mruCode === item2.mruCode)&&(<div className="pull-right jd"><button style={{ display: this.state.configuredList.find(item3=> item.mruCode===item3.mruCode) ? "none" : "block" }} className="call-to-action" onClick={()=>{this.handleClick(item.mruCode)}}>Add Location</button></div>)}<hr/></div></div>))}
                            </div>
                             </div> 
                                  </div> 
                    </div>):null}
            </div>

        );
    }
}

const mapStateToProps = state =>{
    return{
        location:state.locationRed.location,
        conLocations:state.locationRed.conLocations,
        isChecked:state.locationRed.isChecked
    };
};

const mapDispatchToProps = (dispatch) => {
    return{
        loadData:()=>{dispatch(loadData())},
        addLocation:(mruCode)=>{dispatch(addLocation(mruCode))},
        addAllLocation:() =>{dispatch(addAllLocation())},
        removeLocation: (mruCode)=>{dispatch(removeLocation(mruCode))},
        removeAllLocation: () =>{dispatch(removeAllLocation())},
        checkboxState: (mruCode) =>{dispatch(checkboxState(mruCode))},
        checkedLocation:() =>{dispatch(checkedLocation())}

    }
}


export default connect(mapStateToProps,mapDispatchToProps,null,{withRef:true})(NewLocationPanel);

导出类NewLocationPanel扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
开：错，
配置列表：[]
};
this.configLocation=this.configLocation.bind（this）；
this.togglePanel=this.togglePanel.bind（this）；
this.handleClick=this.handleClick.bind（this）；
this.allLocations=this.allLocations.bind（this）；
this.clearall=this.clearall.bind（this）；
this.getLocationData=this.getLocationData.bind（this）；
this.handleRemove=this.handleRemove.bind（this）；
this.removeConfigLocation=this.removeConfigLocation.bind（this）；
this.removelocational=this.removelocational.bind（this）；
this.handleChecklocation=this.handleChecklocation.bind（this）；
this.handleCheckedAdded=this.handleCheckedAdded.bind（this）；
}
//还有其他代码
手动检查位置（mruCode）{
this.props.checkboxState（mruCode）
}
handleCheckedAdded（）{
this.props.checkedLocation（）
}
componentDidMount（）{
this.props.loadData（）；
if（this.props.locationData！=null&&this.props.locationData！=undefined）{
this.configLocation（this.props.locationData）；
}
}
componentDidUpdate（prevProps、prevState）{
如果（prevProps.locationData！=此.props.locationData）{
this.configLocation（this.props.locationData）；
}
}
//还有其他不相关的功能
render（）{
//const{configuredList}=this.state；
const_labels=store.getLabels（）；
让collapsedToggle=this.props.open“折叠”：”
返回(
此.togglePanel（e）}>
{this.props.title}
{this.state.configuredList.map（（loc，index）=>{loc.mruCode}-{{u labels[loc.division]}-{loc.country}{index

在组件中，有一个“添加选中”按钮，通过该按钮，将根据所选项目执行添加操作。如果我选择两个项目，则只有第二个项目添加到其他列表中

---

初始位置列表如下：[{mruCode:“7300”，国家：“澳大利亚”，州：“昆士兰”，部门：“工程”，…}，…]

我知道列表中有多个复选框。完成整个选择后，单击“添加选中”按钮，您希望存储所选项目

这可以通过另一种方式完成，我们可以将每个复选框的选中状态存储在组件状态中，而不是在复选框的每次选中/取消选中时分派操作

您可以使用event.target.checked（句柄更改）方法跟踪所选复选框，并将其存储在状态中

---

单击“添加选中”按钮，分派操作并将整个选定列表发送给减速器。希望这有帮助

经过多次试验，我找到了解决办法。我创建了一个操作，将选中的项目过滤后存储到列表中，然后通过调度按钮操作事件直接发送该列表。 行动代码：

 export const checkboxState = mruCode =>({

键入：GET_复选框， 有效载荷：mruCode });

导出常量checkedLocation=（）=>({ 类型：获取\u检查\u位置 });

减速器功能

case 'GET_CHECKBOX':
    let newList = state.location.filter(obj=>obj.mruCode===action.payload)
    let addedItems = state.isChecked.concat(newList)
    return{
         ...state,
         isChecked:addedItems
    }
    case 'GET_CHECKED_LOCATION':
      return{
          ...state,
          conLocations:[...state.isChecked]
      }    

现在它运行良好。问题出在我的行为上

 export const checkboxState = mruCode =>({

case 'GET_CHECKBOX':
    let newList = state.location.filter(obj=>obj.mruCode===action.payload)
    let addedItems = state.isChecked.concat(newList)
    return{
         ...state,
         isChecked:addedItems
    }
    case 'GET_CHECKED_LOCATION':
      return{
          ...state,
          conLocations:[...state.isChecked]
      }