Javascript React调用操作结果无限循环

我有以下组件。如果条件满足，我想运行一个操作（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);

            }   
        });
    }

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

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

操作/index.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);

            }   
        });
    }

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

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

reducers/reducer\u active\u character.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);

            }   
        });
    }

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

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

---

您的问题是

character.found==true

中的一个是否会更新字符，从而导致组件更新

console.log（characters）

在您的减速机中，是否有

character.found==true

更改您的组件并进行如下更新：

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

this.props.selectCharacters(newCharacters);

---

你的行为可能会引发其他还原者的注意。。这会导致角色道具更新，这会导致组件更新。。。这是正确的答案。它正在触发状态更新，然后再次触发componentDidUpdate，触发另一个操作等。在另一个操作发生后调用操作的替代方法是什么？您可以使用

componentWillReceiveProps

lifecycle方法检查传入的道具以检查状态的更改，并根据需要采取行动。