>

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

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

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

  • 답변 # 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>
    
    

  • 답변 # 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>
    
    

관련 자료

  • 이전 Helm은 어떤 Kubernetes 클러스터가 설치되어 있는지 어떻게 추적합니까?
  • 다음 c++ - std - : hash 의 전달 선언