在Webpack的生产构建中，常量的行为与平时不同。

Question

目前，我的开发版本表现符合预期。我呈现了一个项目列表，每个条目都有project.id作为键。列表中的所有条目都是不同的，正如我所期望的那样。

以下是正常工作的代码。

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; 也可以正常工作。

- Michael Malura

---

你确定Webpack构建失败是由于那行代码吗？我不认为它会有任何影响。你得到了什么错误信息？ - Terry

我没有收到任何错误信息。就像我写的那样，key属性不再按预期工作。似乎projectId对于每个项目都是完全相同的值。但只在生产环境中出现这种情况。相同的代码在开发环境中运行得非常顺畅。 - Michael Malura

生产环境和开发环境下的捆绑代码有什么区别？也许在捆绑时会出现一些奇怪的问题，但上面的代码看起来也很好。 - Lars Vonk

项目的价值从哪里来？ - toby

Answer 1

projects最初是否为空数组？如果是，您可以执行以下操作：

const projects = sortedProjects
    .filter((project) => project.id)
    .map(
      (project) => <ProjectListItem key={project.id} project={project} />
    );

像其他人说的一样，我怀疑这个问题与webpack无关。由于这是一个React相关的问题，请确保您没有做一些愚蠢的事情，例如根据已排序数组中的索引等暂态值设置id。键需要是唯一标识符，不会因为状态而改变。

- Shiraz