Я получаю слишком много повторных отрисовок и захожу в бесконечный цикл, когда добавляю Component CommentCreate в функцию карты.
Компонент PostList, когда я добавляю createCFommonent, я получаю слишком много ошибок повторного рендеринга. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл.
import React,{useState,useEffect} from 'react';
import axios from 'axios'
import './PostList.css'
import CommentCreate from './CommentCreate';
const PostList = () => {
const [ptitle,setPtitle]=useState({});
const fetchPost = async ()=> {
const res=await axios.get('http://localhost:8000/posts')
setPtitle(res.data)
}
useEffect(() => {
fetchPost()
}, [])
const renderedPost = Object.values(ptitle).map((post) => {
return (
<div
className="card"
style={{ width: "30%", marginBottom: "20px" }}
key={post.id}
>
<div className="card-body">
<h3>{post.title}</h3>
<CommentCreate postId={post.id} />
</div>
</div>
);
});
return (
<div>
<h1>Post List</h1>
{renderedPost}
</div>
);
}
export default PostList;
Компонент createComment- это компонент, который предоставляет. Рассмотрите возможность добавления границы ошибки в ваше дерево, чтобы настроить поведение обработки ошибок.
import React,{useState} from 'react';
import axios from 'axios'
import './CommentCreate.css'
const CommentCreate = ({postId}) => {
const [comment, setComment]=useState('')
const createComment = async (e) =>{
e.preventDefault();
await axios.post(`http://localhost:9000/post/${postId}/comment`, {
comment,
});
}
setComment('')
return (
<div>
<input value={comment} onChange={e =>{
setComment(e.target.value)
}} placeholder="Create a Comment here" />
<button class="btn btn-primary" onClick={createComment}>
Comment
</button>
</div>
);
}
export default CommentCreate;
```
2 ответа
ПРОБЛЕМА
Вы
createComment
обновляется родителем и
setComment
вызывается, который снова запускает повторный рендеринг, вызывая
setComment
. Таким образом бесконечный повторный рендер.
РЕШЕНИЕ
Разместите свой
setComment
внутри
createComment
функция.
const createComment = async (e) =>{
e.preventDefault();
await axios.post(`http://localhost:9000/post/${postId}/comment`, {
comment,
});
setComment('')
}
Вы устанавливаете состояние глобально
setComment('')
. Рассмотрите возможность использования
useEffect
если вы хотите установить состояние только при монтировании компонента. Используйте приведенные ниже фрагменты:
useEffect(() => setComment(''), []);
Глобальная установка состояния приведет к повторному рендерингу компонента, и снова при повторном рендеринге будет вызван setComment(''), эта процедура будет выполняться бесконечно, и вы получите ошибку бесконечного цикла, которая есть у вас. Поэтому мое предложение никогда не устанавливать состояние без использования useEffect или без выполнения каких-либо конкретных условий.