javascript - 如何在 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

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

我附上了一张图片，以便您可以看到这两条评论是如何在该州加载的。

新屏幕截图

代码更新和新屏幕截图:

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);

我想添加这些评论所在的代码，也许这可以提供更好的帮助。

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>