Wie gehe ich mit "Kann nicht lesen Eigenschaft Karte von undefined" reagieren/redux

Question

Noch einmal, ich bin mit einem sehr häufigen Fehler konfrontiert "Cannot read property 'map' of undefined". Ich habe eine erste Liste von Artikeln (Filme), die richtig in einem <ul><li></li></ul> laden. Nach dem Senden meiner Aktion durch Klicken auf meine Schaltfläche tritt der Fehler jedoch auf. Ich kann den Status tatsächlich in meinem Redux-Entwicklungstool (sogar mit dem Fehler) sehen, aber ich kann auch sehen, dass sich die Änderung nicht auf meinen Geschäftszustand in meinem Reaktionstool auswirkt.

So, hier ist mein Minderer:

export default function moviesReducer(state = {items}, action) { 
    if(action.type === 'SET_MOVIES_FILTER') { 
    return update(state.items, {$splice: [[1,3]]}) 
    } 
    return state; 
    } 

Hier ist meine Artikelliste (von hier post):

let items = [{ 
    title: 'Mad max', 
    year: 2015, 
    rating: 8, 
    genre: 'fantasy', 
}, { 
    title: 'Spider man 2', 
    year: 2014, 
    rating: 7, 
    genre: 'fantasy', 
}, { 
    title: 'Iron man 3', 
    year: 2013, 
    rating: 7, 
    genre: 'fantasy', 
}, { 
    title: 'Dumb and Dumber To', 
    year: 2014, 
    rating: 5, 
    genre: 'comedy', 
}, { 
    title: 'Ted 2', 
    year: 2015, 
    rating: 6, 
    genre: 'comedy', 
}]; 

Hier ist meine Aktion:

export const SetMoviesFilter =() => { 
    return { 
    type: 'SET_MOVIES_FILTER' 
    }; 
}; 

Und hier ist Meine Komponenten:

const movieTable = ({testmovie, movieTable }) => { 

     return (

     <div> 
      <button onClick={movieTable}>testbutton</button> 
      <ul> 
      {testmovie.map((m, i) => 
     <li key={i}>{m.year} - {m.title}.({m.genre}) - {m.rating}</li> 
    )} 
      </ul> 
     </div>) 
    } 

function mapStateToProps(state) { 
    return { 
     testmovie: state.moviesReducer.items 

    }; 
}; 


const mapDispachToProps = (dispatch) => { 
    return { 
    movieTable:() => {dispatch (SetMoviesFilter()); 
     }, 
    }; 
}; 


const AppMovie = connect(mapStateToProps, mapDispachToProps)(movieTable); 

Wo liege ich falsch? was soll ich machen ? Ich weiß nicht, ob es verwandt ist, aber ich kann meine jsbin nicht funktionieren lassen.

danke.

Answer 1

Ihr Ausgangszustand für state.moviesReducer.items ist undefined.

Überprüfen Sie in Ihrem Reduzierstück export default function moviesReducer(state = {items}, action), wo dieses items herkommt. Es ist am wahrscheinlichsten undefined, wenn der Speicher initialisiert. Sie können es einen Anfangswert von []

geben Sie können auch dieses Problem vermeiden, indem Sie Ihre <ul> in einer if-Anweisung wie

if (testmovie) { 
    // do your testmovie render here. 
} 

bearbeiten Verpackung:

es Ihre Reduzierungen sieht aus wie korrekt abgebildet werden. also ist state.moviesReducer immer definiert.

Wenn Ihre ursprüngliche Liste der Elemente nicht einmal korrekt geladen wird, bedeutet dies, dass Ihr items Objekt den Fehler verursacht.

Wenn Ihre erste Liste korrekt geladen wird und der Fehler erst auftritt, nachdem Sie die Aktion SET_MOVIE_FILTER gesendet haben, bedeutet dies, dass Ihre update(state.items, {$splice: [[1,3]]}) Ihre Statusform mutiert.

Ich weiß nicht, wo Sie diese update Funktion bekommen. aber ich vermute, dass Sie tun sollten return { items: update(state.items, {$splice: [[1,3]]})}

So würde ich über Debugging Ihres Codes gehen.