使用map方法渲染项目名称时出现重复显示问题求助

你的问题出在Projects.js组件中——你错误地在组件内部维护了一个本地状态projects，并且每次组件渲染时，都会遍历传入的props.projects，把每个项目重复添加到本地状态数组里，导致项目名称随着数组元素数量增加而重复显示。

错误代码分析 #

在Projects.js中，你使用本地状态存储项目，并且在每次渲染时执行props.projects.forEach来添加项目：

const [projects, setProjects] = useState([]);

const addProjectToDom = (project) => {
  setProjects([...projects, project]);
};

props.projects.forEach((project) => {
  addProjectToDom(project);
});

每次App组件添加新项目后，Projects组件会重新渲染，此时props.projects包含了所有已添加的项目，而你又把这些项目全部添加到本地状态中，导致本地状态数组不断累积旧项目，最终出现每个项目重复显示的次数和数组元素数量一致的问题。

修复方法 #

直接使用传入的props.projects进行渲染，不需要维护本地状态：

修改后的Projects.js代码：

import React from "react";

function Projects(props) {
  return (
    <div>
      {props.projects.map((project, index) => (
        <div key={index}>
          <h1>{project.name}</h1>
        </div>
      ))}
    </div>
  );
}

export default Projects;

注：这里使用index作为key仅用于演示，实际项目中建议使用项目的唯一标识（比如project.id）作为key，避免渲染异常。

补充说明 #

• React组件应该尽量遵循单向数据流，父组件传递的props直接用于渲染即可，不需要在子组件中复制一份到本地状态，除非有需要修改该数据的场景（而你的场景只是展示）。
• 你的App.js中更新状态的方式是正确的：setProjectsList([...projectsList, project])，这种方式创建了新数组，保证React能检测到状态变化并重新渲染组件。

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