добавить объект в массив на основе идентификатора в редуксе

Question

у меня есть данные о местоположении, как в примере (например: [{страна: "США", область: "Вирджиния"}, {страна: "АВСТРАЛИЯ", область: "Сидней"}, {страна: "ИНДИЯ", область: "bangalore"}]. Я хочу добавить каждое местоположение в один массив, нажав кнопку добавления. В пользовательском интерфейсе я получил данные о местоположении и отобразил их. При добавлении любого конкретного местоположения, нажав соседнюю кнопку добавления, получаем первое местоположениедобавляется в этот массив. Каждый раз, когда он добавляет первый объект местоположения в этот массив. Как добавить местоположение на основе определенного нажатия кнопки (например, если я нажму кнопку для местоположения «ИНДИЯ», то только объект местоположения «ИНДИЯ» добавит кмассив.

Я создал действия и редуктор для операции добавления. Это добавление, но только первый элемент.

actioncreator.js

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

редуктор.js

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

conLocations - это массив, в который я должен добавить объект местоположения.

часть пользовательского интерфейса кнопки добавления:

<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>

подключиться к коду компонента:

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

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

У меня есть сомнения, ямоя функция редуктора.он добавляет первый элемент на основе его идентификатора, но в следующий раз состояние не обновляется.поэтому он снова добавляет первый элемент.Как это решить

Answer 1

Ваши данные

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

Я думаю, mruCode - это первичный ключ. Если другой ключ является первичным, просто измените его на *. 1005 *

У кнопки

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

mapDispatchToProps

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
})

1024 * Переходник * case 'ADD_ALL_LOCATION': return { ...state, conLocations: [...state.location] }