Необходимо сделать так, чтобы при нажатии на кнопку добавления товара(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;