Почему дочерний компонент React игнорирует новый проп?

Question

[Mark]

Изучаю React на тестовом проекте.

В компоненте Exercise есть дочерние Set. При удалении Set - нумерация их должна пересчитываться, но этого не происходит: в консоли виден верный результат пересчета, но Set будто игнорирует обновленный проп number.


Иллюстрация: Новые значения пропа в консоли, и фактическое отображение

Demo&Code: https://codesandbox.io/s/shy-glitter-zrukv?file=/s...

Подсчёт нумерации происходит в ExerciseView:

function ExerciseView({id, title, sets}) {
    let number = 0;
    return (
        <div className="col-12" key={id}>
            <h5>{title}</h5>
            <table className="table table-bordered">
                <tbody>
                {sets.map((set) => {
                    return <Set {...set} number={number++} />
                })}
                </tbody>
            </table>
        </div>
    );
}

Comments

[Mikhail Osher]

Демку на codesandbox покажите

[Mark]

Mikhail Osher, но я приложил её к вопросу: https://codesandbox.io/s/shy-glitter-zrukv?file=/s...

Или что-то ещё добавить надо?

[Mark]

Можно попробовать заполнить пару элементов, и удалить средний чтобы увидеть результат:

Answer 1

[Алексей Уколов]

Конечно, Set игнорирует изменения пропса:

class Set extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            id: props.id,
            weight: null,
            reps: null,
            enableMaxReps: false,
            number: props.number || 0,
            isFilled: false,
        };
    }
}

Уберите number из state, зачем он там?

Comments

[Mark]

Уберите number из state

Это сработало. Хочу уточнить, прежде чем помешать решенным:
Почему все же обновление не произошло, ведь при удалении элемента - ExerciseView заново вызывается, и передаёт в Set обновленный пропс?

зачем он там?

Рудимент, ранее был функционал с ним, забыл убрать

[Алексей Уколов]

Передаёт, но вы же не используете то, что он передаёт, а берёте из стейта.

[Mark]

Алексей Уколов, значит просто обновляется существующий Set(а именно его пропсы)? Т.к. если бы создавался новый Компонент - в конструкторе бы подменялся number на актуальный из props.

P.S. Извиняюсь, если туплю - это очень важный момент, в котором хотелось бы разобраться.

[Алексей Уколов]

Да.