Constant 在 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;也会起作用的。

Answer 1

projects最初是一个空数组吗？如果是这样，您可以执行以下操作：

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

正如其他人所说，我怀疑这个问题与 webpack 有关。由于这是一个与 React 相关的问题，只需确保您没有做过一些愚蠢的事情，例如id基于瞬态值（如排序数组中的索引）进行设置。键必须是不会根据状态而改变的唯一标识符。