0

Необходимо сделать так, чтобы при нажатии на кнопку добавления товара(addNewProduct в AdminAddItem.jsx) все элементы из localStorage отображались без необходимости обновлять страницу.

В PostList если в deps поместить posts будет ошибка: "Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."

Почему она вызывается я понимаю, но как сделать правильно - не знаю. На данный момент по нажатию кнопки в localStorage отправляется объект и при новом рендере всё стабильно отображается.

Вероятнее всего нужно сделать еще один useState и уже его состояние закидывать в deps, но я не могу додумать как.

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

PostList.jsx

import React, {useEffect, useState} from "react"
import PostItem from "../PostItem/PostItem"
import { PostsContainer } from "./styledList.ts"

const PostList = () =>{

    const [posts, setPosts] = useState(localStorage.getItem('products') == null
            ? []
            : (JSON.parse(localStorage.getItem('products')))
    );



    useEffect(() => {
        // Получаем товары из localStorage при загрузке компонента
        setPosts(JSON.parse(localStorage.getItem('products')) || []);
    },[]);
    //posts
    //что поставить в deps чтобы при изменении setPosts отрабатывал UseEffect?

    if (!posts.length) {
        return (
            <h1 style={{textAlign: 'center'}}>
                Посты не найдены!
            </h1>
        )
    }

    return (
        <PostsContainer>
            <>
                {
                    posts.map((product, index) =>
                    <PostItem  number = {index + 1} product = {product} />
                )}
            </>
        </PostsContainer>
    );
};

export default PostList;

AdminAddItem.jsx

import React, {useEffect, useState} from 'react';
import {Button, notification, Tooltip, Space } from "antd";
import { ForwardOutlined } from "@ant-design/icons";
import { InputAdminForm, ClearInput, InputEnter } from "./style.ts"
import Notification from "../Notifications/Notification";
const AdminAddItem = () => {

    const [product, setProduct] = useState({title: '',  price: ''});
    const [items, setItems] = useState([])
    const [api, contextHolder] = notification.useNotification();




    useEffect(() => {
        const localStorageItems = JSON.parse(localStorage.getItem('products'));

        if (localStorageItems) {
            setItems(localStorageItems);
        }
    }, []);

    const addNewProduct = () => {

        const newProduct = {
            title: product.title,
            price: product.price
        };

        const updatedItems = [...items, newProduct]

        localStorage.setItem('products', JSON.stringify(updatedItems));
        setItems(updatedItems)

        setProduct({ title: '', price: ''})
    }



    const openNotificationWithIcon = (type) => {
        if (type === 'success'){
            api["success"]({
                message: 'Успех!',
                description:
                    'Товар успешно добавлен, обновите страницу',
            })
        } if (type === 'error') {
            api["error"]({
                message: 'Заполните поля!',
                description:
                    'Форма не до конца заполнена',
            }
            );
        }
    };

    const sendForm = () => {
        if (product.title && product.price){
            addNewProduct()
            openNotificationWithIcon('success')
        } else {
            openNotificationWithIcon('error')
        }
    }

    return (
        <InputAdminForm>
                <InputEnter>
                    <ClearInput
                        type='text'
                        value={product.title}
                        placeholder='Название товра'
                        onChange = {e => setProduct({...product, title:e.target.value})}
                    />
                    <ClearInput
                        type='text'
                        value={product.price}
                        placeholder='Цена'
                        onChange={e => setProduct({...product, price:e.target.value})}
                    />
                    <Tooltip title="Добавить">
                        {contextHolder}
                        <Button
                            icon={<ForwardOutlined />}
                            onClick={() => sendForm()}
                        />
                    </Tooltip>
                </InputEnter>
        </InputAdminForm>
    );
};

export default AdminAddItem;

1
  • У вас два варианта - написать хук для localStorage или более нормальный вариант - использовать контекст. Commented 1 февр. в 20:20

1 ответ 1

0

Могу ошибиться, но на мой взгляд проблема в том, что вы используете setPosts внутри useEffect без указания зависимостей. Это и приводит к бесконечному циклу обновления, так как вызов setPosts внутри useEffect приводит к повторному вызову useEffect, и так далее. Добавьте posts в зависимость, таким образом, useEffect будет вызываться только при изменении массива posts. В PostList.jsx:

useEffect(() => {
    // Получаем товары из localStorage при загрузке компонента
    setPosts(JSON.parse(localStorage.getItem('products')) || []);
}, [posts]);
1
  • Как раз таки если в массив зависимостей добавить "posts", будет происходить постоянный перерендер. В самом вопросе во втором абзаце я указал какая ошибка будет, если сделать так, как написали вы
    – rilfex
    Commented 12 февр. в 18:55

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.