मेरे पास एक उदाहरण की तरह स्थान डेटा है (उदा: [{देश: "यूएस", क्षेत्र: "वर्जीनिया"}, {देश: "ऑस्ट्रेलिया", क्षेत्र: "सिडनी"}, {देश: "भारत", क्षेत्र: "बैंगलोर "}]। मैं ऐड बटन पर क्लिक करके प्रत्येक स्थान को एक सरणी में जोड़ना चाहता हूं। यूआई में, मैंने स्थान डेटा प्राप्त किया है और उन्हें प्रदर्शित किया है। आसन्न ऐड बटन पर क्लिक करके किसी विशेष स्थान को जोड़ने के दौरान उसमें पहला स्थान जोड़ा जा रहा है सरणी। हर बार यह उस सरणी में पहली स्थान वस्तु जोड़ रहा है। विशेष बटन क्लिक के आधार पर स्थान कैसे जोड़ें (उदा। यदि मैं "भारत" स्थान के लिए बटन पर क्लिक करता हूं तो "भारत" स्थान ऑब्जेक्ट केवल सरणी में जोड़ देगा।

मैंने जोड़ने के ऑपरेशन के लिए क्रियाएं और रेड्यूसर बनाया है। यह जोड़ रहा है लेकिन केवल पहला आइटम है।

एक्शन क्रिएटर.जेएस

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 वह सरणी है जहां मुझे स्थान वस्तु जोड़नी है।

बटन UI भाग जोड़ें:

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

मुझे अपने रेड्यूसर फ़ंक्शन में संदेह है। यह अपनी आईडी के आधार पर पहला आइटम जोड़ रहा है लेकिन अगली बार स्थिति अपडेट नहीं होती है। इसलिए यह पहला आइटम फिर से जोड़ रहा है। इसे कैसे हल करें

0
user7411584 16 जून 2019, 23:58

1 उत्तर

सबसे बढ़िया उत्तर

आपका डेटा

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

मुझे लगता है कि mruCode प्राथमिक कुंजी है। यदि अन्य कुंजी प्राथमिक कुंजी है, तो बस उसमें परिवर्तन करें।

बटन पर

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]
   }
1
bkm412 18 जून 2019, 07:40