呼び出し元アクション結果無限ループ

Question

私は以下のコンポーネントを持っています。条件が満たされたら、アクション（this.props.selectCharacter）を実行します。しかし、これは最大コールスタックは

コンポーネント/ 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); 

      } 
     }); 
    } 

アクション/ 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 
    }; 
} 

リデューサー/ 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

character.found === trueのいずれかが文字を更新し、コンポーネントの更新につながる場合は、問題があります。 'が見つかりあなたの減速で

console.log(characters)は、character.found === true

がありますように、あなたのcomponentDidUpdateを変更

：、あなたの行動は、おそらく小道具を更新するために、あなたの文字を起こし、それを聞いて、他の減速..をトリガー

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

this.props.selectCharacters(newCharacters);