React aufrufen Aktion Ergebnisse Endlosschleife

Question

Ich habe folgende Komponente. Ich möchte eine Aktion (this.props.selectCharacter) ausführen, wenn die Bedingung erfüllt ist. Dies führt jedoch in einer Endlos-Schleife zur Zeit maximal Call-Stack überschritten

Komponenten/board.js

componentDidUpdate() { 
     this.props.characters.map((character) => { 
      // if the character is located correctly 
      if(character.found === true) { 
       // hide the overlay 
       document.getElementById(character.id).style.display = 'none'; 

       // go to next character 
       var nextCharacter = { 
        id: '_x30_2-A-Kenard', 
        name: 'Kenard', 
        'avatar': 'img/2.jpg', 
        found: false 
       }; 

       this.props.selectCharacter(nextCharacter); 

      } 
     }); 
    } 

Aktionen/index.js

export function selectCharacter(character) { 
    // Action creator; needs to return an action (an object with a type property) 
    return { 
     type: 'CHARACTER_ACTIVATED', 
     payload: character 
    }; 
} 

Minderer/reducer_active_character. js

export default function(state = { id: '_x30_1-A-RussellStringerBell', name: 'Stringer Bell', avatar: 'img/1.jpg', found: false }, action) { 
    switch(action.type) { 
     case 'CHARACTER_ACTIVATED': 
      return action.payload; 
    } 

    return state; 
} 

Answer 1

Ihr Problem ist, wenn einer der character.found === true Zeichen aktualisiert, was Komponente Update führt. '

console.log(characters) in Ihrem Minderer, gefunden gibt es eine character.found === true

Ihre componentDidUpdate ändern wie:

const newCharacters = character.map(c => { 
    return c.found ? { // new character } : c; 
}); 

this.props.selectCharacters(newCharacters);