Question

我有一个包含多个对象的位置数组。我已经在用户界面中显示了这些位置。对于每个位置，我都有一个“添加按钮”。当我单击该特定按钮时，特定的单个位置对象将被添加到另一个不同的数组中。该添加功能正常工作，但每次都将第一个位置对象添加到另一个数组中。仅将第一个位置添加到另一个数组。

我已经为“添加位置”创建了动作和reducer函数，并将调度动作连接到我的组件上

action.js：

export const addLocation = id =>({
      type: ADD_LOCATION,
      id
  });

reducer.js：

case 'ADD_LOCATION':
           let addedlocation = state.location.find(obj=>obj.id===action.id)
           return{
            ...state,
            conLocations: [...state.conLocations,addedlocation]
           }

component.jsx：

<div className="col-padding"><h3>Locations List</h3><hR/>
                            {this.props.location.map(loc=>(<div className="jd" key={loc.id}>
                            <span><strong>{loc.mruCode} - {loc.division} - {loc.country} | {loc.currency} | {loc.uom}</strong></span><br/><button className="call-to-action"onClick={()=>{this.handleClick(loc.id)}}>Add Location</button><hR/></div>))}
                           </div>
                            </div>

连接代码：

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

const mapDispatchToProps = (dispatch) => {
    return{
        loadData:()=>{dispatch(loadData())},
        addLocation:(id)=>{dispatch(addLocation(id))}
    }
}


export default connect(mapStateToProps,mapDispatchToProps)(NewLocationPanel);

假设在我的位置数组中，例如[{id：0，location：usa，area：virginia}，{id：1，location：Australia，area：queensland}，{id：2，location：india，area：喀拉拉邦}]

如果我单击澳大利亚位置的添加按钮，则澳大利亚位置元素应添加到具有其属性的另一个数组中。但这是在单击其他位置的任何添加按钮之后，每次都向其他数组添加位置元素

使用redux

0 个答案: