Как сделать ререндер компонента?
Как заставить компонент перерендерится?
Рендер идет на основе массива savedList, как мне при изменении массива заново рендерить все компоненты?
const List = () => {
let savedList = [
{text: 'value123'},
{text: 'value321'},
]
return (
<div>
<Input eventHandler={() => {
savedList.push({text: document.querySelector('.main-input').value})
console.log(savedList);
}}/>
{savedList.map((element) => {return <ListItem text={element.text}/>})}
</div>
)
} Заранее спасибо!
Чтобы заставить компонент перерендериться при изменении 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 понимать, какие элементы нужно обновлять при перерендеринге.
