Состояние компонента ReactJS не меняется должным образом

Question

Я создал класс Container и класс InnerElement. Где Container окутывает InnerElement s. Необходимо показать только один InnerElement в данный момент времени.

Проблема появляется, когда я перехожу на другую InnerElement. Интересно, что когда я создаю console.log, он отображает измененный элемент, но он не отображается. Может ли кто-нибудь дать мне подсказку, пожалуйста, спасибо заранее!

Container класс:

import React from 'react';

export default class Container extends React.Component {

    constructor(props) {
        super(props);

        this.changeElement = this.changeElement.bind(this);

        this.state = {
            currentElement: 0,
        }
    }

    changeElement() {
        const nextElement = this.state.currentElement + 1;
        this.setState({currentElement: nextElement});
    }

    render() {
        const element = this.props.children[this.state.currentElement];
        // In the console log the next (correct) element is shown
        console.log(element);

        return (
            <div>
                {element}
                <button onClick={this.changeElement}>next element</button>
            </div>
        );
    }
}

Здесь класс InnerElement:

import React from 'react';
export default class InnerElement extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            name: props.name ? props.name : "test"
        }
    }

    render() {
        return (
            <div>
                {this.state.name}
            </div>
        );
    }
}

А вот мои Container с InnerElement звонят:

<Container>
    <InnerElement name="A" />
    <InnerElement name="B" />
    <InnerElement name="C" />
    <InnerElement name="D" />
</Container>

Я также обнаружил, что это работает, когда я использую в InnerElement this.props.name вместо состояния.

Answer 1

Реагируйте на проблемы с определением, что ваши дети меняются вместе с вашим setState, потому что вы динамически модифицируете детей. Чтобы помочь React сделать это, вы можете добавить ключ к своему InnerElement:

<Container>
  <InnerElement key="A" name="A" />
  <InnerElement key="B" name="B" />
  <InnerElement key="C" name="C" />
  <InnerElement key="D" name="D" />
</Container>