Reactjs React JS注释线程

在我的代码中，我试图呈现带有回复的线程注释。目前，我可以在帖子（配方）上呈现评论，它通过回复按钮呈现。但是，在我的回复输入字段中，每次单击输入字段时，它只允许我键入一个字母。例如，我将键入“I”，然后必须再次单击输入以键入另一个字母，以便将这两个字母作为单个字符串存储在状态中。此外，当我提交回复时，我的fetch不会运行，我的前端或后端也不会出现错误

非常感谢您的帮助。这是我的线程评论/回复代码。 这是我用来参考的数据

 "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"
    },

函数RecipeCard（）{
const[reply，setReply]=useState（“”）
const getComments=（）=>{
取回(`http://localhost:3000/recipes/${id}/comments`）
.then（res=>res.json（））
.then（data=>setComments（data.comments））
}  
useffect（（）=>{
getComments（）
},[])
常量handleSubmit=（e）=>{
e、 预防默认值（）
取回(`http://localhost:3000/recipes/${id}/comments`{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
“授权”：`持有人${令牌}`
},
正文：JSON.stringify({
内容：搜索，
配方id:id，
可注释的_id:id，
可注释的_类型：“配方”，
用户id:userId
})
})
.then（res=>res.json（））
.then（数据=>console.log（数据））
}
const updateReply=（e）=>{
setReply（如目标值）
console.log（例如target.value）
}
常量handleReply=（id）=>e=>{
e、 预防默认值（）
控制台日志（id）
取回(`http://localhost:3000/recipes/${id}/comments`{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
“授权”：`持有人${令牌}`
},
正文：JSON.stringify({
内容:答复:，
配方id:id，
可注释的_id:id，
可注释类型：“注释”，
用户id:userId
})
})
.then（res=>res.json（））
.then（数据=>console.log（数据））
}
const CommentBox=（{comment，allComments}）=>{
const children=allComments.filter(
（c） =>c.commentable\u type==“Comment”&&c.commentable\u id===Comment.id
);
返回(

{comment.content}
{children？:null}
handleReply（comment.id）}>Reply

);
};
const commentbox=（{comments，allComments}）=>(

{comments.map（（c）=>(
))}

);
常量应用=（）=>{
const rootComments=comments.filter（（c）=>c.commentable_type==“Recipe”）；
返回；
};
返回(
评论

我读到您的所有组件（例如，

CommentBox

）正确吗是否嵌套在

RecipeCard

函数中？如果是，将触发React的组件系统。将其他组件移动到模块级。@AKX是的。将组件移动到模块级是否意味着在我的目录中为CommentBox、CommentBox和App创建一个单独的功能组件文件？不，这足以只需将它们移出函数，移到RecipeCard本身所在的顶层即可。

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" && 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>