React点击指定项目图片时仅弹出对应Modal的问题排查

我给每个项目配置了对应图片，需求是点击图片时打开该项目专属的Modal并展示相关信息，但当前点击任意图片后，所有项目的Modal都会弹出。期望实现仅在点击的图片下方显示对应项目（如右侧图片对应“Volvo Blog”）的Modal，而非全部展示。

当前代码如下：

class ProjectsSection extends Component {
  state = {
    Projects: [],
    openModal: false,
    selectedModal: null,
  };

  async componentDidMount() {
    const { data } = await getProjects();
    this.setState({ Projects: data });
    console.log(this.state.Projects);
  }

  openModal = project => {
    this.setState({ openModal: true, selectedModal: project });
  };

  closeModal = project => {
    this.setState({ openModal: false });
  };

  render() {
    return (
      <div className="Section">
        <h1>Welcome to my Projects 😀</h1>

        <ul className="Projects">
          {this.state.Projects.map(project => (
            <li key={project._id} className="ProjectsShowcase">
              <img
                className="ProjectImage"
                src={project.image}
                alt=" of Project"
                onClick={() => {
                  this.openModal(project);
                  console.log(project._id);
                }}
              />
              {this.state.openModal ? (
                <ProjectModal
                  closeModal={this.closeModal}
                  projectName={this.state.selectedProject.projectName}
                  projectImage={this.state.selectedProject.image}
                  projectDescription={this.state.selectedProject.description}
                />
              ) : null}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

问题核心：你用了一个全局的openModal布尔值状态，所有项目的Modal都会根据这个状态决定是否渲染，所以只要openModal为true，所有Modal都会显示。

修改思路：通过记录选中项目的ID来控制单个Modal的显示，而不是用全局的开关状态。具体修改步骤如下：

1. 更新组件状态：移除openModal和selectedModal，改用selectedProjectId存储当前选中项目的ID，初始值设为null
2. 修改打开/关闭Modal的方法：打开时记录选中项目的ID，关闭时清空ID
3. 调整Modal渲染逻辑：仅当当前遍历的项目ID和selectedProjectId匹配时，才渲染对应的Modal
4. 修复props传递错误：原代码中selectedModal写成了selectedProject，直接用当前遍历的project对象传递props更直观

修改后的完整代码：

class ProjectsSection extends Component {
  state = {
    Projects: [],
    selectedProjectId: null, // 改为存储选中项目的ID
  };

  async componentDidMount() {
    const { data } = await getProjects();
    this.setState({ Projects: data });
  }

  openModal = project => {
    this.setState({ selectedProjectId: project._id }); // 记录选中项目的ID
  };

  closeModal = () => {
    this.setState({ selectedProjectId: null }); // 清空选中ID，关闭Modal
  };

  render() {
    return (
      <div className="Section">
        <h1>Welcome to my Projects 😀</h1>

        <ul className="Projects">
          {this.state.Projects.map(project => (
            <li key={project._id} className="ProjectsShowcase">
              <img
                className="ProjectImage"
                src={project.image}
                alt={`${project.projectName} Project`}
                onClick={() => this.openModal(project)}
              />
              {/* 仅当当前项目ID和选中ID匹配时，渲染Modal */}
              {this.state.selectedProjectId === project._id ? (
                <ProjectModal
                  closeModal={this.closeModal}
                  projectName={project.projectName}
                  projectImage={project.image}
                  projectDescription={project.description}
                />
              ) : null}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

关键说明：

• 每个项目的Modal现在只在selectedProjectId等于当前项目_id时才会渲染，实现了点击哪个项目就显示哪个Modal的效果
• 直接使用当前遍历的project对象传递props，避免了原代码中selectedProject的拼写错误（原代码里状态是selectedModal，却用了selectedProject）
• 关闭Modal时只需清空selectedProjectId，自然会隐藏对应的Modal

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