Блог

В моем коде я пытаюсь отображать многопоточные комментарии с ответами. В настоящее время я могу отображать комментарии к сообщению (рецепту), и он отображается с помощью кнопки ответа. Однако в моем поле ввода ответа это позволит мне вводить только одну букву каждый раз, когда я нажимаю в поле ввода. Например, я введу «i», затем мне придется снова нажать на ввод, чтобы ввести другую букву, чтобы сохранить оба состояния в виде одной строки. Кроме того, когда я отправляю ответ, моя выборка не выполняется, и я не получаю никаких ошибок на моем интерфейсе или серверной части.

Любая помощь приветствуется. Вот мой код для моего поточного комментария / ответа. вот данные, которые я использую для справки.

  "comments": [
    {
      "id": 1,
      "content": "This is so great!",
      "recipe_id": 1,
      "commentable_id": 1,
      "commentable_type": "Recipe",
      "user_id": 1,
      "created_at": "2020-09-08T00:16:55.296Z",
      "updated_at": "2020-09-08T00:16:55.296Z"
    },
    {
      "id": 2,
      "content": "This is another one",
      "recipe_id": 1,
      "commentable_id": 1,
      "commentable_type": "Comment",
      "user_id": 1,
      "created_at": "2020-09-08T00:16:55.323Z",
      "updated_at": "2020-09-08T00:16:55.323Z"
    },
    {
      "id": 3,
      "content": "This is another one",
      "recipe_id": 1,
      "commentable_id": 2,
      "commentable_type": "Comment",
      "user_id": 1,
      "created_at": "2020-09-08T00:16:55.332Z",
      "updated_at": "2020-09-08T00:16:55.332Z"
    },
  

 function RecipeCard() {

const [reply, setReply] = useState("")

const getComments = () => {
  fetch(`http://localhost:3000/recipes/${id}/comments`)
  .then(res => res.json())
  .then(data => setComments(data.comments))

  }  
  useEffect(() => {
    
    getComments()
   },[])

const handleSubmit = (e) => {
  e.preventDefault()
  fetch(`http://localhost:3000/recipes/${id}/comments`,{
    method: "POST",
    headers: {
      "Content-type": "application/json",
      "Authorization": `bearer ${token}`
      },
      body: JSON.stringify({
        content: search,
        recipe_id: id,
        commentable_id: id,
        commentable_type: "Recipe",
        user_id: userId
      })
  })
  .then(res => res.json())
  .then(data => console.log(data))

}



const updateReply = (e) => {
  setReply(e.target.value)
  console.log(e.target.value)
}

const handleReply = (id) => e => {
  e.preventDefault()
  console.log(id)
  fetch(`http://localhost:3000/recipes/${id}/comments`,{
    method: "POST",
    headers: {
      "Content-type": "application/json",
      "Authorization": `bearer ${token}`
      },
      body: JSON.stringify({
        content: reply,
        recipe_id: id,
        commentable_id: id,
        commentable_type: "Comment",
        user_id: userId
      })
  })
  .then(res => res.json())
  .then(data => console.log(data))

}


   const CommentBox = ({ comment, allComments }) => {
    const children = allComments.filter(
      (c) => c.commentable_type === "Comment" amp;amp; c.commentable_id === comment.id
    );
  
    return (
      <li>
        {comment.content}
        {children ? <CommentBoxes comments={children} allComments={allComments} /> : null}
        <input type="text" value={reply} onChange={updateReply}></input> <button onSubmit={() => handleReply(comment.id)}>Reply</button>
      </li>
      
    );
  };

  
  const CommentBoxes = ({ comments, allComments }) => (
    <ul>
      {comments.map((c) => (
        
        <CommentBox comment={c} allComments={allComments} key={c.id}/>
        
      ))}
     
    </ul>
    
  );
  
  const App = () => {
    const rootComments = comments.filter((c) => c.commentable_type === "Recipe");
    return <CommentBoxes comments={rootComments} allComments={comments} />;
  };

return (
<div>
   <form onSubmit={handleSubmit}>
        <textarea value={search} onChange={updateSearch} style={{width:"100%"}} placeholder="Comments"></textarea>
          <button type="submit" >Comment</button>
        </form>
      </div>
      <App/>
</div>