javascript - 重新渲染 UI，同时向帖子的评论添加状态

Question

我的 react 应用程序中有一个帖子评论，其中附加了一个评论组件。

至此，评论已映射并显示在评论组件中

return (
  <ul className="comments">
    {this.props.comments.map(comment =>
      <li className="comment" key={comment.id}>
        <div className="comment-header">
          <p className="comment-author-name">{comment.author.name}</p>
          <Button 
        className="btn delete-btn"
        disabled={this.state.loading}
         onClick={() => this.deleteCommentHandler(comment.id)}>
         {this.state.loading ? 'Deleting comment': 'Delete'}
        </Button>
        <Button 
        className="btn edit-btn"
        disabled={this.state.loading}
         onClick={() => this.deleteCommentHandler(comment.id)}>
         {this.state.loading ? 'Editing comment': 'Edit'}
        </Button>
        </div>
        <p className="comment-content">{comment.contents}</p>

      </li>
    )}
  </ul>

到目前为止，我有一个问题，事实上，状态是通用的，这意味着如果用户发布更多评论，所有评论都会在

{this.state.loading ? 'Deleting comment': 'Delete'}

部分。此外，我希望每当单击 deleteCommentHandler 时 UI 都会更新

deleteCommentHandler = (id) =>{
  console.log(id);
  this.setState({
    loading: true
  })
  this.commentMapper.deletePostComments(id).then(res =>{ // calls another function which makes a serverside request and deletes the comment from the backend
    this.setState({loading: false})
    console.log('hwhwhwh');
  });
}

我应该创建一个评论组件并通过状态加载来渲染它，以及在删除评论时更新 UI 的方法，或者我可以简单地创建更多处理程序来处理每个评论的状态，并使 UI 重新这样渲染？

Answer 1

为什么要通用化加载状态，您所需要做的就是通过使 Comment 成为 React 组件并在内部管理其自己的状态来使每个元素保持其自己的加载状态，从而使您的流程更加受控。

import React from "react";
import Button from "YOURBUTTONPATH";

export default class Comment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
    this.deleteCommentHandler = this.deleteCommentHandler.bind(this);
  }
  deleteCommentHandler(id) {
    console.log(id);
    this.setState({
      loading: true
    });
    // If this function is generic and related the parent component pass it as a props to Comment Component.
    this.commentMapper.deletePostComments(id).then(res => {
      // calls another function which makes a serverside request and deletes the comment from the backend
      this.setState({ loading: false });
      console.log("hwhwhwh");
    });
  }
  render() {
    const { comment } = this.props;
    return (
      <li className="comment" key={comment.id}>
        <div className="comment-header">
          <p className="comment-author-name">{comment.author.name}</p>
          <Button
            className="btn delete-btn"
            disabled={this.state.loading}
            onClick={() => this.deleteCommentHandler(comment.id)}
          >
            {this.state.loading ? "Deleting comment" : "Delete"}
          </Button>
          <Button
            className="btn edit-btn"
            disabled={this.state.loading}
            onClick={() => this.deleteCommentHandler(comment.id)}
          >
            {this.state.loading ? <Loading text={"Editing comment"} {...this.state}/> : "Edit"}
          </Button>
        </div>
        <p className="comment-content">{comment.contents}</p>
      </li>
    );
  }
}

您映射的评论将如下所示:

return (
  <ul className="comments">
    {this.props.comments.map(comment =>
      <Comment key={comment.id} comment={comment} />
    )}
  </ul>
)

加载组件:

export const Loading = ({ loading, text }) => (loading ? <p>{text}</p> : null);