在数组上映射以生成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

这可能是由于您将索引用作键所致。

您可以尝试使用两个库来生成唯一的ID：uuid或uniqid

npm install uniqid

import uniqueid from 'uniqid'

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

Answer 2

看来local和Netlify各自具有不同的默认排序，那么如何为函数提供所需的排序呢？ 下面应强制执行数组中各项的顺序。

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