Как остановить перерендеринг массива?

Question

Нужна ваша помощь. У меня есть частичка кода, которая делает мне блоки, внутри которых можно создавать комментарии. Код работает без ошибок, но некорректно. Дело в том, что когда я создаю комментарий в блоке, а затем создаю новый блок для комментариев, комментарии будут одинаковые в каждом блоке. Как исправить это, чтобы у каждого созданного блока были свои отдельные комментарии? Спасибо

let [newDiscussion, setNewDiscussion] = useState([]); // Состояние для создания блока
let [inputToCreateDiscussion, setInputToCreateDiscussion] = useState(''); // Состояние для input, который создает блок
let [commentInDiscussion, setCommentInDiscussion] = useState([]); // Состояние для создания комментария в блоках
let [inputToCreateCommentInDiscussion, setInputToCreateCommentInDiscussion] = useState(''); // Состояние для input, который создает комментарии в блоках

// Функция для создания блоков
let addDiscussion = (myInput) => {
    let createDiscussion = {
        id: Math.random(),
        task: myInput
    }
    setNewDiscussion([...newDiscussion, createDiscussion])
}

// Функция для создания комментариев
let addCommentToDiscussion = (myInput) => {
    let createCommentInDiscussion = {
        id: Math.random(),
        comment: myInput
    }
    setCommentInDiscussion([...commentInDiscussion, createCommentInDiscussion])
}

let handleInputToDiscussion = (e) => {
    setInputToCreateDiscussion(e.target.value)
}

let handleInputToCommentInDiscussion = (e) => {
    setInputToCreateCommentInDiscussion(e.target.value);
}

let submitNewDiscussion = (e) => {
    e.preventDefault();
    addDiscussion(inputToCreateDiscussion);
    setInputToCreateDiscussion('');
}

let submitCommentInDiscussion = (e) => {
    e.preventDefault();
    addCommentToDiscussion(inputToCreateCommentInDiscussion)
    setInputToCreateCommentInDiscussion('')
}

Answer 1

У вас комментарии никак не связаны с дискуссиями. Судя по всему, ошибка происходит в коде, который остался "за кадром". Кроме этого, в коде нет логики, см. комментарии.

//Состояния двух несвязных инпутов в одном компоненте, плохо, но не критично.
let [inputToCreateDiscussion, setInputToCreateDiscussion] = useState(''); // Состояние для input, который создает блок
let [inputToCreateCommentInDiscussion, setInputToCreateCommentInDiscussion] = useState(''); // Состояние для input, который создает комментарии в блоках

//не ясно, зачем нужно 2 состояния для создания НОВОГО комментария и дискуссии, да еще и в одном компоненте. 
let [commentInDiscussion, setCommentInDiscussion] = useState([]); // Состояние для создания комментария в блоках
let [newDiscussion, setNewDiscussion] = useState([]); // Состояние для создания блока

//ок хендлеры инпутов
let handleInputToDiscussion = (e) => {
  setInputToCreateDiscussion(e.target.value)
}
let handleInputToCommentInDiscussion = (e) => {
  setInputToCreateCommentInDiscussion(e.target.value);
}


// Функция для создания блоков
let addDiscussion = (myInput) => {
    //получаем некий инпут и создаем объект дискуссии, а где у дискуссии комментарии?
    let createDiscussion = {
        id: Math.random(),
        task: myInput
    }

    setNewDiscussion([...newDiscussion, createDiscussion])//ок, добавляем новую дискуссию в состояние.
}

//сабмит хендлер. (дискуссия)
let submitNewDiscussion = (e) => {
  e.preventDefault();
  addDiscussion(inputToCreateDiscussion);
  setInputToCreateDiscussion('');
}



// Функция для создания комментариев
let addCommentToDiscussion = (myInput) => {
    //К какой дискуссии вы добавляете комментарий? В коде об этом ничего нет.
    let createCommentInDiscussion = {
        id: Math.random(),
        comment: myInput
    }
    setCommentInDiscussion([...commentInDiscussion, createCommentInDiscussion])
}

//сабмит хендлер. (коммент)
let submitCommentInDiscussion = (e) => {
    e.preventDefault();
    addCommentToDiscussion(inputToCreateCommentInDiscussion)
    setInputToCreateCommentInDiscussion('')
}

Но корень ошибки заключается в том, что вы всю логику смешали в одну кучу.

У вас должна быть какая-то структура данных, которая хранится в едином хранилище (Родительский компонент со своим стейтом, или Context, или Redux), иными словами состояние ВСЕХ дискуссий и принадлежащих им комментариев.
У вас должен быть компонент Discussion и компонент Comment.
Должно быть 2 кнопки: Добавить комментарий в дискуссию, создать новую дискуссию.

На выходе должна получиться структура вида (форму добавления комментария/дискуссии, размещайте как потребуется):

<Discussion id={1}> 
  <Comment id={11}/>
  <Comment id={12}/>
</Discussion>
<Discussion id={2}> 
  <Comment id={13}/>
</Discussion>
<Discussion id={3}> 
  <Comment id={14}/>
</Discussion>

БЛОГ НА HUSL

Как остановить перерендеринг массива?

Ответы (1 шт):