Блог

В настоящее время я изучаю fetch и componentDidMount. Я попытался получить имя пользователя и комментарий с этого HTTP-адреса http://localhost:3000/data/commentData.json и разместил их в ленте(своего рода Instagram), но имя пользователя/комментарий не появились… Если вы не возражаете, не могли бы вы помочь мне с тем, какую часть я пропустил или что-то не так с моим кодом? Я действительно ценю вашу помощь! Я оставлю код ниже!

Это Comment.js что я ожидаю получить Имя пользователя и комментарий через fetch

 import React, { Component } from 'react'; import COMMENT_LIST from './CommentData'; import './Comment.css';  export class Comment extends Component {  constructor() {  super();  this.state = {  commentList: [],  commentValue: '',  };  }   render() {  return (  lt;gt;  {/* {this.props.commentAddList.map((comm, idx) =gt; {  return lt;li key={idx}gt;{comm}lt;/ligt;; */}  {/* {COMMENT_LIST.map(comment =gt; {  return (  lt;li className="commentContainer"gt;  lt;span className="commentUserName"gt;{comment.userName}lt;/spangt;  lt;span className="commentContent"gt;{comment.content}lt;/spangt;  lt;/ligt;  );  })} */}  {(this.props.commentList || []).map(comment =gt; {  //props  return (  lt;li className="commentContainer"gt;  lt;span className="commentUserName"gt;{comment.userName}lt;/spangt;  lt;span className="commentContent"gt;{comment.content}lt;/spangt;  lt;/ligt;  );  })}  lt;/gt;  );  } }  export default Comment;     

Это Feed.js что я пытался добавить комментарий с именем пользователя и контентом

 import React, { Component } from 'react'; import './Feed.scss'; import {  FaRegHeart,  FaRegComment,  FaRegPaperPlane,  FaRegBookmark,  FaEllipsisH, } from 'react-icons/fa'; import Comment from '../../../compoonents/Comment/Comment'; import selfiImg from '../../../assets/images/about.png'; import ucscPic from '../../../assets/images/ucscPic.png';  class Feed extends Component {  constructor() {  super();  this.state = {  value: '',  commentList: [],  };  }  componentDidMount() {  fetch('http://localhost:3000/data/commentData.json', {  method: 'GET',  })  .then(res =gt; res.json())  .then(data =gt; {  this.setState({  commentList: data,  });  });  }  getValue = event =gt; {  this.setState({  value: event.target.value,  });  };   addComment = () =gt; {  this.setState({  commentList: this.state.commentList.concat([this.state.value]),  value: '',  });  };   addCommEnter = e =gt; {  if (e.key === 'Enter') {  this.addComment();  }  };  render() {  return (  lt;div className="feeds"gt;  lt;div className="article"gt;  lt;div className="identi"gt;  lt;img className="selfi-identi" alt="selfi-img" src={selfiImg} /gt;  lt;span className="name"gt; Jiwan Jeon lt;/spangt;   {/* lt;i id="test" class="fa fa-ellipsis-h" aria-hidden="true"gt;lt;/igt; */}  lt;div className="faEllipsisH"gt;  {/* lt;FontAwesomeIcon icon={faEllipsisH} /gt; */}  lt;FaEllipsisH /gt;  lt;/divgt;  lt;/divgt;   lt;div className="pic"gt;  lt;img id="feed-pic" src={ucscPic} /gt;  lt;/divgt;   lt;div className="show-box"gt;  lt;div className="reaction-icons"gt;  lt;FaRegHeart className="heart" /gt;  lt;FaRegComment className="comment" /gt;  lt;FaRegPaperPlane className="plane" /gt;  lt;FaRegBookmark className="bookMark" /gt;   {/* lt;FontAwesomeIcon icon={faHeart} className="heart" /gt;  lt;FontAwesomeIcon icon={faComment} className="comment" /gt;  lt;FontAwesomeIcon icon={faPaperPlane} className="plane" /gt;  lt;FontAwesomeIcon icon={faBookmark} className="bookMark" /gt; */}  lt;/divgt;   lt;div className="like-counts"gt;  lt;spangt;like 4,000lt;/spangt;  lt;/divgt;   lt;div className="check-comments"gt;  lt;spangt;  UC Santa Cruz will continue to offer most courses remotely or  online for spring and summer 2021, providing in-person  instruction for a small  lt;/spangt;  lt;a id="space" href=""gt;  expanding  lt;/agt;  lt;br /gt;  lt;a href=""gt;Check the all commentslt;/agt;  lt;ul className="feed-comments"gt;  lt;Comment commentAddList={this.state.commentList} /gt;  {/* lt;ligt;hellolt;/ligt; */}  {/* {this.state.commentList.map((comm, idx) =gt; {  return lt;li key={idx}gt;{comm}lt;/ligt;;  })} */}    lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;div className="comment"gt;  lt;i className="fa fa-smile-o" /gt;  lt;input  // onChange={this.textChange}  // onKeyPress={this.enterClick}  onKeyPress={this.addCommEnter}  onChange={this.getValue}  className="user-input"  type="text"  placeholder="Add Comment..."  value={this.state.value}  /gt;  lt;button onClick={this.addComment} className="post"gt;  Post  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  );  } }  export default Feed;   

В вашем Comment.js файле эта строка выдает вам ошибку: this.props.commentList , потому что вы не определили такую опору (возможно, вы ошиблись this.props.commentAddList ..