Javascript .map не возвращает правильные компоненты

Question

Я только что столкнулся с проблемой, когда мой метод .map не возвращает правильное значение. Этот проект построен в реакции.

Это то, что я ищу:

const prepInfo = [
        <PrepInfo uniqueKey={1} type={'prep'} quantity={'1'} unit={'unit'} suffix={'suffix'}/>,
        <PrepInfo uniqueKey={1} type={'prep'} quantity={'1'} unit={'unit'} suffix={'suffix'}/>,
    ];

И это код, который был реализован для отображения значений хранилища в новый массив

const prepInfo = props.recipe.prep_info.map(function(record, index) {
        return (
            <PrepInfo uniqueKey={1} type={'prep'} quantity={'1'} unit={'unit'} suffix={'suffix'}/>
        )
    });

I Я знаю, что на самом деле это не отображение значений, я пытался точно определить, где была проблема, и пока заглушил реквизит. Если бы кто-нибудь мог помочь объяснить, почему значение, возвращаемое методом .map, не равно первому массиву, это было бы очень полезно.

edit: я знаю, что они не равны, потому что вниз по течению эти компоненты анимируются, а версия .map вызывает разрыв анимации.

Answer 1

Возможно, вам понадобится добавить key к реквизитам PrepInfo.

const prepInfo = props.recipe.prep_info.map(function(record, index) {
    return (
        <PrepInfo key={record.someUniqueId} uniqueKey={1} type={'prep'} quantity={'1'} unit={'unit'} suffix={'suffix'}/>
    )
});

Когда вы используете карту для создания компонентов, вам нужно дать им key, чтобы реагирующий знал который есть какой.

Больше в документации