React中单张图片隐藏/显示失效：点击按钮会隐藏整个图片数组

问题出在你用了一个全局的show状态控制所有图片的显示，点击按钮自然会影响整个数组。要实现单张图片的独立控制，需要给每张图片单独维护显示状态，以下是两种可行方案：

方案一：给图片对象添加显示状态字段 #

初始化pics时，给每个图片对象新增isVisible属性，单独控制该图片的显示/隐藏：

import "./main.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useEffect, useState } from "react";
import {
  faCircleChevronLeft,
  faCircleChevronRight,
  faCircleXmark,
} from "@fortawesome/free-solid-svg-icons";

const Main = ({ galleryImages }) => {
  const [slideNumber, setSlideNumber] = useState(0);
  const [openModal, setOpenModal] = useState(false);
  const [pics, setPics] = useState([]);

  const handleOpenModal = (index) => {
    setSlideNumber(index);
    setOpenModal(true);
  };

  const removeImage = (id) => {
    setPics((oldState) => oldState.filter((item) => item.id !== id));
  };

  // 切换单张图片的显示状态
  const toggleSingleImage = (id) => {
    setPics((oldState) =>
      oldState.map((item) =>
        item.id === id ? { ...item, isVisible: !item.isVisible } : item
      )
    );
  };

  const handleCloseModal = () => {
    setOpenModal(false);
  };

  useEffect(() => {
    // 初始化时给每个图片添加isVisible默认值为true
    setPics(galleryImages.map(img => ({ ...img, isVisible: true })));
  }, []);

  return (
    <div>
      {pics.map((pic) => {
        return (
          <div style={{ marginBottom: "100px" }} key={pic.id}>
            {pic.id}
            {/* 根据当前图片的isVisible状态控制显示 */}
            {pic.isVisible && (
              <img
                src={pic.img}
                width="500px"
                height="500px"
                alt={`Image ${pic.id}`}
              />
            )}
            <button onClick={() => toggleSingleImage(pic.id)}>
              toggle: {pic.isVisible ? 'hide' : 'show'}
            </button>
            <button onClick={() => removeImage(pic.id)}>Delete</button>
          </div>
        );
      })}
    </div>
  );
};

export default Main;

方案二：用独立状态存储各图片的显示状态 #

如果不想修改原图片对象结构，可以用单独的visibleIds对象记录每个图片id的显示状态：

import "./main.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useEffect, useState } from "react";
import {
  faCircleChevronLeft,
  faCircleChevronRight,
  faCircleXmark,
} from "@fortawesome/free-solid-svg-icons";

const Main = ({ galleryImages }) => {
  const [slideNumber, setSlideNumber] = useState(0);
  const [openModal, setOpenModal] = useState(false);
  const [pics, setPics] = useState([]);
  // 用对象存储每个图片id的显示状态，默认都为true
  const [visibleIds, setVisibleIds] = useState({});

  const handleOpenModal = (index) => {
    setSlideNumber(index);
    setOpenModal(true);
  };

  const removeImage = (id) => {
    setPics((oldState) => oldState.filter((item) => item.id !== id));
    // 删除图片时同步移除对应的显示状态
    setVisibleIds((prev) => {
      const newState = { ...prev };
      delete newState[id];
      return newState;
    });
  };

  const toggleSingleImage = (id) => {
    setVisibleIds((prev) => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  const handleCloseModal = () => {
    setOpenModal(false);
  };

  useEffect(() => {
    setPics(galleryImages);
    // 初始化所有图片的显示状态为true
    const initialVisible = galleryImages.reduce((acc, img) => {
      acc[img.id] = true;
      return acc;
    }, {});
    setVisibleIds(initialVisible);
  }, []);

  return (
    <div>
      {pics.map((pic) => {
        // 读取当前图片id对应的显示状态
        const isVisible = visibleIds[pic.id] ?? true;
        return (
          <div style={{ marginBottom: "100px" }} key={pic.id}>
            {pic.id}
            {isVisible && (
              <img
                src={pic.img}
                width="500px"
                height="500px"
                alt={`Image ${pic.id}`}
              />
            )}
            <button onClick={() => toggleSingleImage(pic.id)}>
              toggle: {isVisible ? 'hide' : 'show'}
            </button>
            <button onClick={() => removeImage(pic.id)}>Delete</button>
          </div>
        );
      })}
    </div>
  );
};

export default Main;

两种方案核心都是给每张图片单独维护显示状态，而非用全局状态控制所有图片。若允许修改图片对象结构，方案一更直观；若不想改动原数据，方案二更合适。

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