Webpack生产构建中常量表现异常：React列表渲染重复问题

开发构建环境下，以project.id作为React列表项的key时，项目列表渲染正常，所有列表项互不重复。正常工作的代码如下：

for (const project of sortedProjects) {
    if (project.id) {
        projects.push(
            <ProjectListItem
                key={project.id}
                project={project}
            />,
        );
    }
}

为优化代码，新增const projectId = project.id;变量赋值后，修改后的代码如下：

for (const project of sortedProjects) {
    const projectId = project.id;
    if (projectId) {
        projects.push(
            <ProjectListItem
                key={projectId}
                project={project}
            />,
        );
    }
}

但Webpack生产构建后出现异常：列表中所有项目均重复，推测每个列表项的projectId值相同。不过测试时通过console.log({ project, id: project.id, projectId });打印的项目和ID均为唯一值，且改用const { id } = project;并将key设为id时，生产构建恢复正常。

内容的提问来源于stack exchange，提问作者Michael Malura