javascript - React에서 내 게시물의 댓글을 업데이트하는 방법

게시물의 의견을 업데이트하는 데 큰 문제가 있습니다. 문제는 클라이언트가 공개하기를 원하지 않으므로 기본값은 표시되지 않습니다. 이 코드가 있습니다

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

콘솔을 보여주는 스크린 샷.