Javascript 根据redux中的id将对象添加到数组

我有位置数据，比如一个例子（例如：[国家：“美国”，地区：“弗吉尼亚州”}，{国家：“澳大利亚”，地区：“悉尼”}，{国家：“印度”，地区：“班加罗尔”}]。我想通过单击“添加”按钮将每个位置添加到一个数组中。在UI中，我已获取位置数据并显示这些数据。当通过单击相邻的“添加”按钮添加任何特定位置时，第一个位置将添加到该数组中。每次它都将第一个位置对象添加到该数组中。如何基于pa添加位置关节按钮单击（例如，如果我单击“INDIA”位置的按钮，则仅“INDIA”位置对象将添加到数组中

我已经为添加操作创建了操作和减缩器。它正在添加，但只添加了第一项

actioncreator.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]
               }

conLocations是我必须添加location对象的数组

添加按钮用户界面部分：

<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={(id)=>{this.handleClick(loc.id)}}>Add Location</button><hR/></div>))}
                            </div>

我对我的reducer函数有疑问。它正在根据其id添加第一项，但下次状态未更新。因此它再次添加第一项。如何解决它

您的数据 我认为

mruCode

是主键。如果其他键是主键，只需更改为该键即可

按按钮 mapDispatchToProps 行动 减速器 如果添加所有位置 行动 减速器

---

你的

handleClick

函数是什么样子的？你的数据中id在哪里？[{国家：“美国”，地区：“弗吉尼亚州”}，{国家：“澳大利亚”，地区：“悉尼”}，{国家：“印度”，地区：“班加罗尔”}没有包含id。你能共享完整的数据吗？@LadiAden hi类似于->`` handleClick（id）{返回这个。props.addLocation（id）；}“``@bkm412在网络选项卡中看起来像……0:{mruCode:“7300”，国家：“CA”，国家文字：“加拿大”，部门：“世界农业”，部门：}1:{mruCode:“1700”，国家：“美国”，国家文字：“美国”，部门：“世界工业”，部门：{mruCode:“1000”，国家：“美国”，国家文字：“美国”，部门：“WORLDWIDE_AGRICULTURAL”，…}@user741158。但在您的数据中，没有键

id

。请共享屏幕截图

console.log（this.props.location）

在您的UI代码中。如果您的id未定义，

obj.id===action.id

意味着

未定义===undefined

并且总是成为真的。非常感谢。这太棒了。真的太棒了。我需要更多的帮助。我必须通过单击“添加所有位置”按钮来添加所有位置。如何定义缩减器和操作？如果可能，请给我关于这方面的一些建议。我添加了您的请求。@bkm12如果可能，请再请求一个请求。单击后必须隐藏“添加按钮”。它基于mruCode

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

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

const location = [
{mruCode: "7300", country: "CA", countryText: "Canada", division: "WORLDWIDE_AGRICULTURAL",…},
{mruCode: "1700", country: "US", countryText: "United States", division: "WORLDWIDE_INDUSTRIAL",…}
]

onClick={()=>{this.props.addLocation(loc.mruCode)}

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

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

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

export const addAllLocation = () => ({
    type : 'ADD_ALL_LOCATION' // If you use type variable, please replace this
})

case 'ADD_ALL_LOCATION':
   return {
      ...state,
      conLocations: [...state.location]
   }