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

Question

[Iliya V. Soldatkin]

Изучаю 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

Что я тут делаю не так?

Answer 1

[Iliya V. Soldatkin]

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);

Answer 2

[Сергей Сунцев]

Используйте useEffect
hooks-effect

Comments

[Iliya V. Soldatkin]

Хорошо, попробую, благодарю.