Как сделать ререндер компонента?

Question

Как сделать ререндер компонента?

Dlazder Мудрец (16917), на голосовании 1 год назад

Как заставить компонент перерендерится?
Рендер идет на основе массива savedList, как мне при изменении массива заново рендерить все компоненты?

 const List = () => { 
    let savedList = [ 
        {text: 'value123'}, 
        {text: 'value321'}, 
    ] 
    return ( 
         
             { 
                savedList.push({text: document.querySelector('.main-input').value}) 
                console.log(savedList); 
            }}/> 
            {savedList.map((element) => {return })} 
        
 
             
    ) 
}

Заранее спасибо!

Answer 1

Чтобы заставить компонент перерендериться при изменении savedList, можно использовать хук useState из React. Вместо объявления массива внутри функции, мы можем создать состояние с помощью useState, которое будет содержать массив savedList. Затем, при добавлении нового элемента в массив, мы должны вызвать функцию установки состояния и передать ей новый массив.

Вот пример кода:

jsx
import { useState } from 'react';

const List = () => {
const [savedList, setSavedList] = useState([
{ text: 'value123' },
{ text: 'value321' }
]);

const addToList = () => {
const newElement = { text: document.querySelector('.main-input').value };
setSavedList([...savedList, newElement]);
};

return (
<div>
<Input eventHandler={addToList} />
{ savedList.map ((element) => (
<ListItem key={element.text} text={element.text} />
))}
</div>
);
};

Здесь мы объявляем состояние savedList и функцию установки состояния setSavedList, используя хук useState. Далее, при добавлении нового элемента в массив, мы создаем новый объект для этого элемента и вызываем функцию установки состояния с помощью оператора распыления (...spread operator) для объединения старого и нового списка. Наконец, мы обновляем список элементов на странице, используя новый массив savedList.

Обратите внимание, что я также добавил атрибут key к элементам списка - это помогает React понимать, какие элементы нужно обновлять при перерендеринге.