如何在 React 中更新我的帖子的评论

Question

我有一个关于更新帖子评论的大问题。问题是客户不希望它公开，所以默认是不显示。我有这个代码

import React, { useState, useEffect, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getPost } from '../../actions/post';

// Other parts
import ScrollToTop from '../routing/ScrollToTop';

const CommentEdition = ({ getPost, post: { post, loading }, match }) => {
  const [formData, setFormData] = useState({
    cstatus: false,
    comment: '',
  });

  useEffect(() => {
    getPost(match.params.id);
  }, [getPost, match.params.id]);

  const { cstatus, comment } = formData;

  const onChange = (e) =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  return (
    <section className='section-size-2 lighter-bg'>
      <ScrollToTop />
      <div className='container'>
        <div className='grid'>
          <div className='column-4 '>
            <Link
              to='/user-comments'
              className='white-button'
              style={{ marginBottom: 30, display: 'block' }}
            >
              Back to Comments
            </Link>
            <h4>Comments management</h4>
            <h1 className='animated-text'>Review & Edit</h1>
          </div>
          <div className='column-8 profile-main-area'>
            <Fragment>
              <form className='box white shadow text-left'>
                <label>Did you become a client already? *</label>
                <div className='form-input-select'>
                  <select
                    id='cstatus'
                    name='cstatus'
                    value={cstatus}
                    onChange={(e) => onChange(e)}
                  >
                    <option value='true'>Yes</option>>
                    <option value='false'>No</option>
                  </select>
                  <i className='fas fa-chevron-down'></i>
                </div>

                <label>About You</label>
                <textarea
                  name='comment'
                  placeholder='Tell us about you'
                  value={comment}
                  onChange={(e) => onChange(e)}
                ></textarea>

                <button className='button' type='submit'>
                  Submit
                </button>
              </form>
            </Fragment>
          </div>
        </div>
      </div>
    </section>
  );
};

CommentEdition.propTypes = {
  getPost: PropTypes.func.isRequired,
  post: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  post: state.post,
});

export default connect(mapStateToProps, { getPost })(CommentEdition);

它来自单击我要发布的特定评论，但我不知道如何将信息放入表单中。我有getPost(match.params.id) 并且正在显示正确的帖子，但是我如何才能获得该特定评论并填充到表单中以进行更新。

链接看起来像这样http://localhost:3000/review-commment/5e806b4d6de9c747939a1696/5e9f4ff01c70d30300c42feb

感谢您的帮助，如果这太复杂并且需要更多详细信息，请告诉我。

我附上一张图片，以便您查看两个 cmets 在该状态下的加载情况。

新的屏幕截图

代码更新和新屏幕截图：

import React, { useState, useEffect, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { getPost } from '../../actions/post';

// Other parts
import ScrollToTop from '../routing/ScrollToTop';

const CommentEdition = ({ getPost, post: { post, loading }, match }) => {
  const [formData, setFormdata] = useState({
    cstatus: false,
    comment: ''
  });

  const { comments } = useSelector(state => ({ ...state.post.post }));

  const curco =
    comments && comments.filter(el => el._id === match.params.commentid);

  console.log(curco);

  useEffect(() => {
    getPost(match.params.id);
  }, [getPost, match.params.id]);

  const { cstatus, comment } = formData;

  const onChange = e =>
    setFormdata({ ...formData, [e.target.name]: e.target.value });

  return (
    <section className="section-size-2 lighter-bg">
      <ScrollToTop />
      <div className="container">
        <div className="grid">
          <div className="column-4 ">
            <Link
              to="/user-comments"
              className="white-button"
              style={{ marginBottom: 30, display: 'block' }}
            >
              Back to Comments
            </Link>
            <h4>Comments management</h4>
            <h1 className="animated-text">Review & Edit</h1>
          </div>
          <div className="column-8 profile-main-area">
            <Fragment>
              <form className="box white shadow text-left">
                <label>Comment Status *</label>
                <div className="form-input-select">
                  <select
                    id="cstatus"
                    name="cstatus"
                    value={cstatus}
                    onChange={e => onChange(e)}
                  >
                    <option value="true">Published</option>>
                    <option value="false">Draft</option>
                  </select>
                  <i className="fas fa-chevron-down"></i>
                </div>

                <label>Comment</label>
                <textarea
                  name="comment"
                  placeholder="Comment goes here"
                  value={comment}
                  onChange={e => onChange(e)}
                ></textarea>

                <button className="button" type="submit">
                  Submit
                </button>
              </form>
            </Fragment>
          </div>
        </div>
      </div>
    </section>
  );
};

CommentEdition.propTypes = {
  getPost: PropTypes.func.isRequired,
  post: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  post: state.post,
  curco: state.curco
});

export default connect(mapStateToProps, { getPost })(CommentEdition);

我想添加这些 cmets 的来源代码，也许这会有所帮助。

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Moment from 'react-moment';
import { connect } from 'react-redux';

const CommentItem = ({ auth, post: { _id, title, comments, date } }) => {
  return (
    <Fragment>
      {auth.user.usertype === 'worker' && comments.length > 0 ? (
        <div
          className="quotee-post comment-list"
          style={{
            borderBottom: '2px solid #e6e6e6',
            paddingBottom: 25,
            marginBottom: 25
          }}
        >
          <Fragment>
            <div className="title">List of comments for</div>
            <h4>{title}</h4>
            {comments.map((comment, id) => (
              <div key={id} className="caption comments-data">
                <div className="first-col">
                  <h6>{comment.comment}</h6>

                  <Fragment>
                    <div className="sub">By {comment.name}</div>

                    <p>
                      Date <Moment format="MM/DD/YYYY">{comment.date}</Moment>
                    </p>
                  </Fragment>
                </div>
                <div className="second-col">
                  {comment.cstatus ? (
                    <Fragment>
                      <small>
                        Comment Status:
                        <br />
                        <span style={{ color: '#28a745' }}>
                          <i className="fas fa-check"></i> published
                        </span>
                      </small>
                    </Fragment>
                  ) : (
                    <Fragment>
                      <small>
                        Comment Status:
                        <br />
                        <span style={{ color: '#fe9100' }}>
                          <i className="fas fa-pause-circle"></i> draft
                        </span>
                      </small>
                    </Fragment>
                  )}
                  <br />
                  <Link
                    className="red-button"
                    to={`/review-commment/${_id}/${comment._id}`}
                  >
                    Review and Edit
                  </Link>
                </div>
              </div>
            ))}
          </Fragment>
        </div>
      ) : null}
    </Fragment>
  );
};

CommentItem.propTypes = {
  post: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps, {})(CommentItem);

显示控制台的屏幕截图。

Answer 1

您可以使用useSelector 从商店中获取评论对象列表 您可以添加以下代码以获取评论对象列表并开始使用 id 过滤以获取特定评论

const comment = useSelector(state => state.post.comments)
// I can see that state are not parent of comments, you might want to add the parent in above like 
// useSelector(state => state.posts.comments)
// In this case, posts is the parent of comments

const filteredComment = comment && comment.filter(el => el._id === match.params.id)
// filteredComment.comment should be the comment you needed

更新答案：

        <textarea
          name="comment"
          placeholder="Comment goes here"
          initialValue = {curco ? curco[0].comment || undefined}
          value={comment}
          onChange={e => onChange(e)}
        ></textarea>

Answer 2

我有点忙，但这是解决此问题的方法。实际的解决方案非常干净，我所做的只是在这里加载信息

import React, { useState, useEffect, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getPost, updateComment } from '../../actions/post';

// Other parts
import ScrollToTop from '../routing/ScrollToTop';

const CommentEdition = ({
  getPost,
  post: { post, loading },
  location: { currentcom },
  postId,
  commentId,
  updateComment,
  match
}) => {
  const [formData, setFormdata] = useState({
    cstatus: false,
    comment: '',
    user: '',
    name: '',
    photo: ''
  });

  useEffect(() => {
    getPost(match.params.id);

    const newcstatus = currentcom && currentcom.cstatus;
    const newcomment = currentcom && currentcom.comment;
    const newuser = currentcom && currentcom.user;
    const newphoto = currentcom && currentcom.photo;
    const newname = currentcom && currentcom.name;

    setFormdata({
      cstatus: newcstatus,
      comment: newcomment,
      user: newuser,
      photo: newphoto,
      name: newname
    });
  }, [getPost, currentcom, match.params.id]);

  const { cstatus, comment, user, photo, name } = formData;

  const onChange = e =>
    setFormdata({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();
    postId = match.params.id;
    commentId = match.params.commentid;
    updateComment(postId, commentId, formData);
  };

  return (
    <section className="section-size-2 lighter-bg">
      <ScrollToTop />
      <div className="container">
        <div className="grid">
          <div className="column-4 ">
            <Link
              to="/user-comments"
              className="white-button"
              style={{ marginBottom: 30, display: 'block' }}
            >
              Back to Comments
            </Link>
            <h4>Comments management</h4>
            <h1 className="animated-text">Review & Edit</h1>
          </div>
          <div className="column-8 profile-main-area">
            <Fragment>
              <form
                onSubmit={e => onSubmit(e)}
                className="box white shadow text-left"
              >
                <label>Comment Status *</label>
                <div className="form-input-select">
                  <select
                    id="cstatus"
                    name="cstatus"
                    value={cstatus}
                    onChange={e => onChange(e)}
                  >
                    <option value="true">Published</option>>
                    <option value="false">Draft</option>
                  </select>
                  <i className="fas fa-chevron-down"></i>
                </div>

                <label>Comment</label>
                <textarea
                  name="comment"
                  placeholder="Comment goes here"
                  value={comment}
                  onChange={e => onChange(e)}
                ></textarea>

                <label>Author of comment</label>
                <input name="name" type="text" value={name} readOnly />

                <label>User</label>
                <input name="user" type="text" value={user} readOnly />

                <label>Photo file</label>
                <input name="photo" type="text" value={photo} readOnly />

                <button className="button" type="submit">
                  Submit
                </button>
              </form>
            </Fragment>
          </div>
        </div>
      </div>
    </section>
  );
};

CommentEdition.propTypes = {
  getPost: PropTypes.func.isRequired,
  updateComment: PropTypes.func.isRequired,
  post: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  post: state.post
});

export default connect(mapStateToProps, { getPost, updateComment })(
  CommentEdition
);

真正让它变得更容易的是，我从另一个组件将道具加载到这个组件上，然后这个组件变成了一个常规表单，从道具安装数据，但是当我保存时，我必须拼接该注释。

<Link
     className="red-button"
     to={{
       pathname: `/review-commment/${_id}/${comment._id}`,
       currentcom: comment
     }}
     >
     Review and Edit
</Link>