Блог

Главная - Вопросы по программированию - Я получаю слишком много повторных рендеров и выполняю бесконечный цикл, когда добавляю компонент CommentCreate в функцию map

Я получаю слишком много повторных рендеров и выполняю бесконечный цикл, когда добавляю компонент CommentCreate в функцию map

#reactjs #react-hooks #react-state #react-error-boundary

#reactjs #реагирующие хуки #реагирующее состояние #реакция-ошибка-граница

Вопрос:

Компонент PostList когда я добавляю createcommonent, я получаю слишком много ошибок повторного рендеринга. 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;

```

Комментарии:

1. Опубликуйте свой CommentCreate компонент. Проблемы лежат там, я не вижу проблем в PostList компоненте.

2. привет @PrateekThapa, я добавил компонент createComment, не могли бы вы сказать мне, что происходит не так или какова основная логика этой ошибки, я здесь борюсь

Ответ №1:

ПРОБЛЕМА

Вы createComment обновляетесь родительским и setComment вызывается, что вызывает повторный рендеринг снова setComment . Таким образом, бесконечный повторный рендеринг.

РЕШЕНИЕ

Поместите свой setComment внутри createComment функции.

   const createComment = async (e) =>{
        e.preventDefault();
        await axios.post(`http://localhost:9000/post/${postId}/comment`, {
          comment,
        });
        
        setComment('')
    }

Ответ №2:

Вы устанавливаете состояние глобально setComment('') . Рассмотрите возможность использования useEffect , если вы хотите установить состояние только при монтировании компонента. Используйте приведенные ниже фрагменты:

 useEffect(() => setComment(''), []);

Глобальная настройка состояния приведет к повторному рендерингу компонента, и снова при повторном рендеринге будет вызван setComment(«), эта процедура выполняется бесконечно, и вы получите ошибку бесконечного цикла, которой вы являетесь. Поэтому мое предложение никогда не устанавливать состояние без использования useEffect или без выполнения какого-либо конкретного условия.