通过.map()显示和隐藏选定的div元素

Question

我看过的关于显示或隐藏div的每一段视频，如果您使用的是基于true或false的状态，则完全无效，因此当通过.map()单击按钮时，所有隐藏的元素都会被显示出来，因此它不会很好地使用所有的元素，我猜这就是为什么应该使用元素的索引来确定应该显示还是隐藏的元素，对吗？

场景

因此，我正在构建一个学习体验的社交平台，在这个平台上，我在数组中映射我所有的帖子，一旦我点击我的评论图标，评论就应该显示出来，但是不幸的是，我无法找到关于使用功能组件的解决方案。

这就是我所拥有的：

import React, { useState, useEffect, useReducer, useRef, useMemo } from "react";
import axios from "axios";
import Cookies from "universal-cookie";
import "../../styles/private/dashboard.css";
import DashboardHeader from "../../components/private/templates/header";
import DashboardSidebar from "../../components/private/templates/sidebar";
import ImageSearchIcon from "@material-ui/icons/ImageSearch";
import VideoLibraryIcon from "@material-ui/icons/VideoLibrary";
import FavoriteIcon from "@material-ui/icons/Favorite";
import SendIcon from "@material-ui/icons/Send";
import { Avatar } from "@material-ui/core";
import { useSelector, useDispatch } from "react-redux";
import { newPost } from "../../redux/actions/posts/new-post";
import { likePost } from "../../redux/actions/posts/like-post";
import { getPosts } from "../../redux/actions/posts/get-posts";
import { unlikePost } from "../../redux/actions/posts/unlike-post";
import { getPostLikes } from "../../redux/actions/posts/get-likes";
import { likePostComment } from "../../redux/actions/posts/like-comment";
import { unlikePostComment } from "../../redux/actions/posts/unlike-comment";
import { newPostComment } from "../../redux/actions/posts/new-post-comment";
import ChatBubbleOutlineIcon from "@material-ui/icons/ChatBubbleOutline";
import LoopIcon from "@material-ui/icons/Loop";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import Pusher from "pusher-js";
import FlipMove from "react-flip-move";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import io from "socket.io-client";

const socket = io.connect("http://localhost:5000");

function Dashboard({
  history,
  getPost,
  getLike,
  getAllPosts,
  getAllLikes,
  likePosts,
  unlikePosts,
}) {
  const [participants, setParticipants] = useState({});
  const cookies = new Cookies();
  const [toggle, setToggle] = useState(false);
  const [messages, setMessages] = useState("");
  const [media, setMedia] = useState(null);
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState("");
  const [comment, setComment] = useState();
  const userLogin = useSelector((state) => state.userLogin);
  const { user } = userLogin;
  const [uname, setUname] = useState(user.name);
  const [upic, setUpic] = useState(user.pic);
  const dispatch = useDispatch();

  const config = {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${user.token}`,
    },
  };

  useEffect(() => {
    if (!cookies.get("authToken")) {
      history.push("/login");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [history]);

  useEffect(() => {
    axios.get("/api/post/posts", config).then((response) => {
      setPosts(response.data);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const handler = (item) => {
      setPosts((oldPosts) => {
        const findItem = oldPosts.find((post) => post._id === item._id);
        if (findItem) {
          return oldPosts.map((post) => (post._id === item._id ? item : post));
        } else {
          return [item, ...oldPosts];
        }
      });
    };

    socket.on("posts", handler);
    return () => socket.off("posts", handler);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const postHandler = (e) => {
    e.preventDefault();
    dispatch(newPost(uname, upic, messages, media));
    setMessages("");
  };

  const LikePost = (postId) => {
    likePosts(postId, user._id, user.name, user.pic);
  };

  const UnlikePost = (postId) => {
    unlikePosts(postId);
  };

  const submitComment = (postId) => {
    dispatch(newPostComment(postId, uname, upic, comment));
    setComment("");
  };

  const LikeCommentPost = (postId, commentId) => {
    dispatch(likePostComment(postId, commentId, user._id, user.name, user.pic));
  };

  const UnlikeCommentPost = (postId, commentId) => {
    dispatch(unlikePostComment(postId, commentId));
  };

  return error ? (
    <span>{error}</span>
  ) : (
    <div className="dashboard">
      <DashboardHeader />
      <div className="dashboard__container">
        <div className="dashboard__sidebar">
          <DashboardSidebar />
        </div>
        <div className="dashboard__content">
          <div className="dashboard__contentLeft">
            <div className="dashboard__messenger">
              <div className="dashboard__messengerTop">
                <Avatar src={user.pic} className="dashboard__messengerAvatar" />
                <input
                  type="text"
                  placeholder={`What's on your mind, ${user.name}`}
                  value={messages}
                  onChange={(e) => setMessages(e.target.value)}
                />
                <SendIcon
                  className="dashboard__messengerPostButton"
                  onClick={postHandler}
                />
              </div>
              <div className="dashboard__messengerBottom">
                <ImageSearchIcon
                  className="dashboard__messengerImageIcon"
                  value={media}
                  onChange={(e) => setMedia((e) => e.target.value)}
                />
                <VideoLibraryIcon className="dashboard__messengerVideoIcon" />
              </div>
            </div>

            <div className="dashboard__postsContainer">
              <FlipMove>
                {posts.map((post, i) => (
                  <div className="dashboard__post" key={i}>
                    <MoreHorizIcon className="dashboard__postOptions" />
                    <div className="dashboard__postTop">
                      <Avatar
                        className="dashboard__postUserPic"
                        src={post.upic}
                      />
                      <h3>{post.uname}</h3>
                    </div>
                    <div className="dashboard__postBottom">
                      <p>{post.message}</p>
                      {media === null ? (
                        ""
                      ) : (
                        <div className="dashboard__postMedia">{media}</div>
                      )}
                    </div>
                    <div className="dashboard__postActions">
                      {toggle ? (
                        <ChatBubbleOutlineIcon
                          onClick={() => setToggle(!toggle)}
                          className="dashboard__actionComment"
                        />
                      ) : (
                        <ChatBubbleOutlineIcon
                          onClick={() => setToggle(!toggle)}
                          className="dashboard__actionComment"
                        />
                      )}
                      <label
                        id="totalLikes"
                        className="dashboard__comments"
                        style={{ color: "forestgreen" }}
                      >
                        {post.commentCount}
                      </label>

                      {post.likes.find((like) => like.uid === user._id) ? (
                        <FavoriteIcon
                          onClick={() => UnlikePost(post._id)}
                          className="dashboard__actionUnlike"
                        />
                      ) : (
                        <FavoriteBorderIcon
                          onClick={() => LikePost(post._id)}
                          className="dashboard__actionLike"
                        />
                      )}
                      <label
                        id="totalLikes"
                        className="dashboard__likes"
                        style={{ color: "forestgreen" }}
                      >
                        {post.likeCount}
                      </label>
                    </div>
                    <div
                      className={
                        toggle
                          ? "dashboard__commentContent toggle"
                          : "dashboard__commentContent"
                      }
                    >
                      <div className="dashboard__postComments">
                        {post.comments.map((comment) => (
                          <div
                            key={comment.toString()}
                            className="dashboard__postComment"
                          >
                            <div className="dashboard__postCommentTop">
                              <Avatar src={comment.upic} />
                              <h4>{comment.uname}</h4>
                            </div>
                            <p>{comment.message}</p>
                            <div className="dashboard__postCommentActions">
                              {comment.likes.find(
                                (like) => like.uid === user._id
                              ) ? (
                                <FavoriteIcon
                                  onClick={() =>
                                    UnlikeCommentPost(post._id, comment._id)
                                  }
                                  className="dashboard__actionUnlike"
                                />
                              ) : (
                                <FavoriteBorderIcon
                                  onClick={() =>
                                    LikeCommentPost(post._id, comment._id)
                                  }
                                  className="dashboard__actionLike"
                                />
                              )}
                              <label
                                id="totalLikes"
                                className="dashboard__likes"
                                style={{ color: "forestgreen" }}
                              >
                                {comment.likeCount}
                              </label>
                            </div>
                          </div>
                        ))}
                      </div>

                      <div className="dashboard__commentInput">
                        <input
                          type="text"
                          placeholder="Comment post"
                          value={comment}
                          onChange={(e) => setComment(e.target.value)}
                        />
                        <button onClick={() => submitComment(post._id)}>
                          Send
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </FlipMove>
            </div>
          </div>
          <div className="dashboardContentRight"></div>
        </div>
      </div>
    </div>
  );
}

Dashboard.propTypes = {
  getLike: PropTypes.arrayOf(PropTypes.string),
  getPost: PropTypes.arrayOf(PropTypes.string),
  likePost: PropTypes.arrayOf(PropTypes.string),
  unlikePost: PropTypes.arrayOf(PropTypes.string),
};

function mapStateToProps(state) {
  return {
    getPost: getPosts(state),
    getLike: getPostLikes(state),
    likePosts: likePost(state),
    unlikePosts: unlikePost(state),
  };
}

function mapDispatchToProps(dispatch) {
  return {
    getAllPosts: (posts) => dispatch(getPosts(posts)),
    getAllLikes: (likes) => dispatch(getPostLikes(likes)),
    likePosts: (like) => dispatch(likePost(like)),
    unlikePosts: (like) => dispatch(unlikePost(like)),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

额外

来自youtube的这是一个未列出的视频，只是为了以防万一你不明白。

Answer 1

你那里有很多代码..。您应该重构我更小的组件，更容易阅读和可维护性。

您可以查看我发布的答案，这是相同的核心问题：axios删除功能只是从表中删除最后一个用户，而不是我单击的用户。

您的切换是基于全局状态的，因此每个帖子都没有正确的方式查看它是否打开，这就是它将打开所有内容的原因。

你需要知道哪个是打开的，哪些是不打开的。

在这里，我重构了您的代码以使其在打开的多个框中工作，我没有在代码框上测试它，我让您尝试，但是它不是很大的更改，所以应该可以工作。

请注意这些消息的变化：

• useState属性openBoxes
• 方法toggleCommentBox
• 方法isCommentBoxOpen

然后，我在您的jsx中替换了您检查注释框是否打开的方式。

    function Dashboard({
                       history,
                       getPost,
                       getLike,
                       getAllPosts,
                       getAllLikes,
                       likePosts,
                       unlikePosts,
                   }) {
    const [participants, setParticipants] = useState({});
    const cookies = new Cookies();
    const [openBoxes, setOpenBoxes] = useState([]);
    const [messages, setMessages] = useState("");
    const [media, setMedia] = useState(null);
    const [posts, setPosts] = useState([]);
    const [error, setError] = useState("");
    const [comment, setComment] = useState();
    const userLogin = useSelector((state) => state.userLogin);
    const {user} = userLogin;
    const [uname, setUname] = useState(user.name);
    const [upic, setUpic] = useState(user.pic);
    const dispatch = useDispatch();

    const config = {
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${user.token}`,
        },
    };

    useEffect(() => {
        if (!cookies.get("authToken")) {
            history.push("/login");
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [history]);

    useEffect(() => {
        axios.get("/api/post/posts", config).then((response) => {
            setPosts(response.data);
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        const handler = (item) => {
            setPosts((oldPosts) => {
                const findItem = oldPosts.find((post) => post._id === item._id);
                if (findItem) {
                    return oldPosts.map((post) => (post._id === item._id ? item : post));
                } else {
                    return [item, ...oldPosts];
                }
            });
        };

        socket.on("posts", handler);
        return () => socket.off("posts", handler);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    
    /*
        Toggle state of post boxes
     */
    const toggleCommentBox = postId => {
        if(openBoxes.includes(postId)){
            setOpenBoxes(openBoxes.filter(x => x !== postId))
        } else {
            setOpenBoxes([...openBoxes, postId])
        }
    }
    /*
        Returns boolean if comment box is open on this post
     */
    const isCommentBoxOpen = postId => openBoxes.includes(postId)
    
    const postHandler = (e) => {
        e.preventDefault();
        dispatch(newPost(uname, upic, messages, media));
        setMessages("");
    };

    const LikePost = (postId) => {
        likePosts(postId, user._id, user.name, user.pic);
    };

    const UnlikePost = (postId) => {
        unlikePosts(postId);
    };

    const submitComment = (postId) => {
        dispatch(newPostComment(postId, uname, upic, comment));
        setComment("");
    };

    const LikeCommentPost = (postId, commentId) => {
        dispatch(likePostComment(postId, commentId, user._id, user.name, user.pic));
    };

    const UnlikeCommentPost = (postId, commentId) => {
        dispatch(unlikePostComment(postId, commentId));
    };

    return error ? (
        <span>{error}</span>
    ) : (
        <div className="dashboard">
            <DashboardHeader/>
            <div className="dashboard__container">
                <div className="dashboard__sidebar">
                    <DashboardSidebar/>
                </div>
                <div className="dashboard__content">
                    <div className="dashboard__contentLeft">
                        <div className="dashboard__messenger">
                            <div className="dashboard__messengerTop">
                                <Avatar src={user.pic} className="dashboard__messengerAvatar"/>
                                <input
                                    type="text"
                                    placeholder={`What's on your mind, ${user.name}`}
                                    value={messages}
                                    onChange={(e) => setMessages(e.target.value)}
                                />
                                <SendIcon
                                    className="dashboard__messengerPostButton"
                                    onClick={postHandler}
                                />
                            </div>
                            <div className="dashboard__messengerBottom">
                                <ImageSearchIcon
                                    className="dashboard__messengerImageIcon"
                                    value={media}
                                    onChange={(e) => setMedia((e) => e.target.value)}
                                />
                                <VideoLibraryIcon className="dashboard__messengerVideoIcon"/>
                            </div>
                        </div>

                        <div className="dashboard__postsContainer">
                            <FlipMove>
                                {posts.map((post, i) => (
                                    <div className="dashboard__post" key={i}>
                                        <MoreHorizIcon className="dashboard__postOptions"/>
                                        <div className="dashboard__postTop">
                                            <Avatar
                                                className="dashboard__postUserPic"
                                                src={post.upic}
                                            />
                                            <h3>{post.uname}</h3>
                                        </div>
                                        <div className="dashboard__postBottom">
                                            <p>{post.message}</p>
                                            {media === null ? (
                                                ""
                                            ) : (
                                                <div className="dashboard__postMedia">{media}</div>
                                            )}
                                        </div>
                                        <div className="dashboard__postActions">
                                            {isCommentBoxOpen(post.id) ? (
                                                <ChatBubbleOutlineIcon
                                                    onClick={() => toggleCommentBox(post._id)}
                                                    className="dashboard__actionComment"
                                                />
                                            ) : (
                                                <ChatBubbleOutlineIcon
                                                    onClick={() => toggleCommentBox(post._id)}
                                                    className="dashboard__actionComment"
                                                />
                                            )}
                                            <label
                                                id="totalLikes"
                                                className="dashboard__comments"
                                                style={{color: "forestgreen"}}
                                            >
                                                {post.commentCount}
                                            </label>

                                            {post.likes.find((like) => like.uid === user._id) ? (
                                                <FavoriteIcon
                                                    onClick={() => UnlikePost(post._id)}
                                                    className="dashboard__actionUnlike"
                                                />
                                            ) : (
                                                <FavoriteBorderIcon
                                                    onClick={() => LikePost(post._id)}
                                                    className="dashboard__actionLike"
                                                />
                                            )}
                                            <label
                                                id="totalLikes"
                                                className="dashboard__likes"
                                                style={{color: "forestgreen"}}
                                            >
                                                {post.likeCount}
                                            </label>
                                        </div>
                                        <div
                                            className={
                                                toggle
                                                    ? "dashboard__commentContent toggle"
                                                    : "dashboard__commentContent"
                                            }
                                        >
                                            <div className="dashboard__postComments">
                                                {post.comments.map((comment) => (
                                                    <div
                                                        key={comment.toString()}
                                                        className="dashboard__postComment"
                                                    >
                                                        <div className="dashboard__postCommentTop">
                                                            <Avatar src={comment.upic}/>
                                                            <h4>{comment.uname}</h4>
                                                        </div>
                                                        <p>{comment.message}</p>
                                                        <div className="dashboard__postCommentActions">
                                                            {comment.likes.find(
                                                                (like) => like.uid === user._id
                                                            ) ? (
                                                                <FavoriteIcon
                                                                    onClick={() =>
                                                                        UnlikeCommentPost(post._id, comment._id)
                                                                    }
                                                                    className="dashboard__actionUnlike"
                                                                />
                                                            ) : (
                                                                <FavoriteBorderIcon
                                                                    onClick={() =>
                                                                        LikeCommentPost(post._id, comment._id)
                                                                    }
                                                                    className="dashboard__actionLike"
                                                                />
                                                            )}
                                                            <label
                                                                id="totalLikes"
                                                                className="dashboard__likes"
                                                                style={{color: "forestgreen"}}
                                                            >
                                                                {comment.likeCount}
                                                            </label>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>

                                            <div className="dashboard__commentInput">
                                                <input
                                                    type="text"
                                                    placeholder="Comment post"
                                                    value={comment}
                                                    onChange={(e) => setComment(e.target.value)}
                                                />
                                                <button onClick={() => submitComment(post._id)}>
                                                    Send
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </FlipMove>
                        </div>
                    </div>
                    <div className="dashboardContentRight"></div>
                </div>
            </div>
        </div>
    );
}

Let me know if it works or you need more explanation