При отображении массива для генерации компонентов React порядок массива не учитывается

Question

У меня есть массив изображений src (this.props.images), который я использую для рендеринга сетки в проекте, который я сделал с помощью Gatsby.Это работает, как и ожидалось, при локальном запуске - изображения отображаются в том порядке, в котором они появляются в массиве.Тем не менее, я создал и развернул версию для Netlify и обнаружил, что изображения отображаются в произвольном порядке, который не соответствует порядку исходного массива.

Любые идеи, которые могут вызвать этоповедение?Вот код:

const Grid = styled.div`
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 5px;
    grid-auto-rows: minMax(100px, auto);
`

export default class Board extends React.Component {
    render() {
        return (
            <Grid>
                {this.props.images.map((image, index) => (
                    <Image key={index} src={image}>
                    </Image>
                ))}
            </Grid>
        )
    }
}

Answer 1

Похоже, что local и Netlify имеют разные сортировки по умолчанию, так как насчет того, чтобы дать функции нужную сортировку?Ниже приведен порядок следования элементов из массива.

{this.props.images.map((image, index) => (
    <Image key={index} src={image}>
    </Image>)).sort(() => a - b )
  }
</Grid>

Answer 2

Возможно, это вызвано тем, что вы используете индексы в качестве ключей.

Вы можете попробовать две библиотеки для генерации уникального идентификатора: uuid или uniqid

npm install uniqid

import uniqueid from 'uniqid'

<Grid>{list.map((item) => <li key={uniqueid()}>{item}</li>)}</Grid>