javascript - 为什么状态为假时此按钮不显示？

Question

我创建了一个组件来充当“喜欢/不喜欢”按钮。当状态为真时，“不喜欢”按钮成功显示，但是当我单击“不喜欢”时，它确实不成功，状态应设置为假为（喜欢：假）。但是，我没有看到按钮。我注意到的一件事是，当我单击“不喜欢”时，“不喜欢”按钮消失了，“喜欢”按钮确实出现了一毫秒，然后消失在空气中。我无法弄清楚为什么。

以下是我喜欢的按钮组件的所有代码：

import React from "react";
import { API, graphqlOperation } from "aws-amplify";
import { Button } from "element-react";
import { createLike, deleteLike } from "../graphql/mutations";
import { UserContext } from "../App";

class Like extends React.Component {
  state = {
    liked: "",
  };

  componentDidMount() {
    this.setLiked();
  }

  setLiked() {
    console.log(this.props);
    const { user } = this.props;
    const { post } = this.props;
    if (post.likes.items.find((items) => items.liker === user.username)) {
      this.setState({ liked: true });
      console.log("liked: true");
    } else {
      this.setState({ liked: false });
      console.log("liked: false");
    }
  }

  handleLike = async (user) => {
    try {
      const input = {
        liker: user.username,
        likePostId: this.props.postId,
      };
      await API.graphql(graphqlOperation(createLike, { input }));
      this.setState({
        liked: true,
      });
      console.log("Liked!");
    } catch (err) {
      console.log("Failed to like", err);
    }
  };

  handleUnlike = async (likeId) => {
    try {
      const input = {
        id: likeId,
      };
      await API.graphql(graphqlOperation(deleteLike, { input }));
      this.setState({
        liked: false,
      });
      console.log("Unliked!");
    } catch (err) {
      console.log("Failed to unlike", err);
    }
  };

  render() {
    const { like } = this.props;
    const { liked } = this.state;
    return (
      <UserContext.Consumer>
        {({ user }) => (
          <React.Fragment>
            {liked ? (
              <Button type="primary" onClick={() => this.handleUnlike(like.id)}>
                Unlike
              </Button>
            ) : (
              <Button
                type="primary"
                onClick={() => this.handleLike(user, like.id)}
              >
                Like
              </Button>
            )}
          </React.Fragment>
        )}
      </UserContext.Consumer>
    );
  }
}

export default Like;

父组件的代码：

import React from "react";
import { API, graphqlOperation } from "aws-amplify";
import {
  onCreateComment,
  onCreateLike,
  onDeleteLike,
} from "../graphql/subscriptions";
import { getPost } from "../graphql/queries";
import Comment from "../components/Comment";
import Like from "../components/Like";
import LikeButton from "../components/LikeButton";
import { Loading, Tabs, Icon } from "element-react";
import { Link } from "react-router-dom";
import { S3Image } from "aws-amplify-react";
import NewComment from "../components/NewComment";

class PostDetailPage extends React.Component {
  state = {
    post: null,
    isLoading: true,
    isAuthor: false,
  };

  componentDidMount() {
    this.handleGetPost();
    this.createCommentListener = API.graphql(
      graphqlOperation(onCreateComment)
    ).subscribe({
      next: (commentData) => {
        const createdComment = commentData.value.data.onCreateComment;
        const prevComments = this.state.post.comments.items.filter(
          (item) => item.id !== createdComment.id
        );
        const updatedComments = [createdComment, ...prevComments];
        const post = { ...this.state.post };
        post.comments.items = updatedComments;
        this.setState({ post });
      },
    });
    this.createLikeListener = API.graphql(
      graphqlOperation(onCreateLike)
    ).subscribe({
      next: (likeData) => {
        const createdLike = likeData.value.data.onCreateLike;
        const prevLikes = this.state.post.likes.items.filter(
          (item) => item.id !== createdLike.id
        );
        const updatedLikes = [createdLike, ...prevLikes];
        const post = { ...this.state.post };
        post.likes.items = updatedLikes;
        this.setState({ post });
      },
    });
    this.deleteLikeListener = API.graphql(
      graphqlOperation(onDeleteLike)
    ).subscribe({
      next: (likeData) => {
        const deletedLike = likeData.value.data.onDeleteLike;
        const updatedLikes = this.state.post.likes.items.filter(
          (item) => item.id !== deletedLike.id
        );
        const post = { ...this.state.post };
        post.likes.items = updatedLikes;
        this.setState({ post });
      },
    });
  }

  componentWillUnmount() {
    this.createCommentListener.unsubscribe();
  }

  handleGetPost = async () => {
    const input = {
      id: this.props.postId,
    };
    const result = await API.graphql(graphqlOperation(getPost, input));
    console.log({ result });
    this.setState({ post: result.data.getPost, isLoading: false }, () => {});
  };

  checkPostAuthor = () => {
    const { user } = this.props;
    const { post } = this.state;
    if (user) {
      this.setState({ isAuthor: user.username === post.author });
    }
  };

  render() {
    const { post, isLoading } = this.state;
    return isLoading ? (
      <Loading fullscreen={true} />
    ) : (
      <React.Fragment>
        {/*Back Button */}
        <Link className="link" to="/">
          Back to Home Page
        </Link>
        {/*Post MetaData*/}
        <span className="items-center pt-2">
          <h2 className="mb-mr">{post.title}</h2>
        </span>
        <span className="items-center pt-2">{post.content}</span>
        <S3Image imgKey={post.file.key} />
        <div className="items-center pt-2">
          <span style={{ color: "var(--lightSquidInk)", paddingBottom: "1em" }}>
            <Icon name="date" className="icon" />
            {post.createdAt}
          </span>
        </div>

        <div className="items-center pt-2">
          {post.likes.items.map((like) => (
            <Like
              user={this.props.user}
              like={like}
              post={post}
              postId={this.props.postId}
            />
          ))}
        </div>
        <div className="items-center pt-2">
          {post.likes.items.length}people liked this.
        </div>
        <div>
          Add Comment
          <NewComment postId={this.props.postId} />
        </div>
        {/* Comments */}
        Comments: ({post.comments.items.length})
        <div className="comment-list">
          {post.comments.items.map((comment) => (
            <Comment comment={comment} />
          ))}
        </div>
      </React.Fragment>
    );
  }
}

export default PostDetailPage;

我想我知道为什么它没有出现。这是因为一开始当用户不喜欢它时，没有“喜欢”对象，所以没有什么可显示的，因为只有当有一个“喜欢”映射到它时才会显示。我不知道如何解决它。

标签： javascriptreactjsreact-state