iliyasold
@iliyasold
I'm

Как использовать window.onload в React?

Изучаю react. Хочу вывести комментарии, хранящиеся в localStorage при загрузке страницы, но не соображу, как это сделать. Пробовал скопировать массив из состояния и закинуть в него всё, что есть в сторожке так:
window.onload = function() {
        const initialItems = [...items] 

        for (let i = 0; i < localStorage.length; i++) {
            initialItems.push(JSON.parse(localStorage.getItem(items.itemId)));
        }

        setItems(items);
    };


Код компонента:
import CommentForm from './CommentForm'
import CommentList from './CommentList'
import CommentatorsTop from "./CommentatorsTop";
import {useState} from 'react';

function CommentWidget() {
    const [items, setItems] = useState([]);
    
    window.onload = function() {
        const initialItems = [...items]

        for (let i = 0; i < localStorage.length; i++) {
            initialItems.push(JSON.parse(localStorage.getItem(items.itemId)));
        }

        setItems(items);
    };

    function addItem(item) {
        const newItems = [...items]

        newItems.push(item)

        setItems(newItems);

        const storageNewItems = JSON.stringify(newItems);

        localStorage.setItem(item.itemId, storageNewItems);
    }

    function removeCommentItem(position, itemId) {
        if (window.confirm('Удалить?')) {
            const newListItem = [...items]

            newListItem.splice(position, 1);

            localStorage.removeItem(itemId);

            setItems(newListItem);
        }
    }

    return (
        <div className="CommentWidget">
            <div className="CommentForm-wrap">
                <CommentForm addNewItem={addItem}/>

                <CommentList comments={items} removeCommentItem={removeCommentItem} />
            </div>

            <CommentatorsTop names={items}/>
        </div>
    )
}

export default CommentWidget;


Весь код: https://github.com/iliyasold/commentsWidget

Что я тут делаю не так?
  • Вопрос задан
  • 2949 просмотров
Решения вопроса 1
iliyasold
@iliyasold Автор вопроса
I'm
1. Нашёл ошибку в функции addItem: отправлять в localStorage здесь следует элемент item, а не массив, конечно.

2. Однозначно, здесь можно использовать мощный хук useEffect. Однако, поскольку вопрос касался именно window.onload, оставлю здесь решение.
При перезагрузке страницы копировать массив items не нужно и бессмысленно. Необходимо объявить пустой массив const storageItems = []
и добавить в него всё, что есть в localStorage:
for (let i = 0; i < localStorage.length; i++) { 
storageItems.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); 
}
и затем передать массив в state:
setItems(items);
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
GreyCrew
@GreyCrew
Full-stack developer
Используйте useEffect
hooks-effect
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
Market-place Ростов-на-Дону
от 100 000 до 200 000 ₽
31 мая 2024, в 01:02
2000 руб./в час
31 мая 2024, в 00:44
500 руб./за проект
31 мая 2024, в 00:30
1000 руб./за проект