سلام به همه دوستان خسته نباشید
من با یک اخطاری روبرو شدم که بصورت مکرر تکرار میشه
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.
من یه فیوریت لیستی ایجاد کردم که وقتی هر پستی بوکمارک میشه تو اون لیست قرار میگیره
الان کد من دقیقا درست عمل میکنه فقط این اخطار بصورت مکرر میاد
کد صفحه بوکمارک
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Layout from "../Layout";
import { getBookmark } from "./Bookmarks";
import BookmarkList from "./BookmarkList";
const Bookmark = () => {
const [items, setItems] = useState([]);
useEffect(() => {
setItems(getBookmark());
}, [items]);
const showItems = items => {
return (
<div className="row">
<div className="col-12">
<h5 className="text-center text-muted"></h5>
<table
className="table table-sortable table-striped"
width="100%"
>
<tbody>
{items.map((dcdd, i) => (
<BookmarkList
key={i}
dcdd={dcdd}
showRemoveBookmarkButton={true}
/>
))}
</tbody>
</table>
</div>
</div>
);
};
const noItemsMessage = () => (
<h5 className="text-center text-muted">
<br /> <Link className="co" to="/dcdd">dcdd</Link>
</h5>
);
return (
<Layout
title="dcdd"
description=""
className="container-fluid"
>
{items.length > 0 ? showItems(items) : noItemsMessage()}
</Layout>
);
};
export default Bookmark;
زمانی که items رو تو useEffect قرار ندم اخطاری نمیاد اما بدون قرار دادن items با حذف کردن یک پست از لیست باید صفحه رو رفرش کنم تا از لیست حذف شه
ممنون میشم اگه کسی بتونه کمکم کنه این مشکلمو حل کنم
سلام
وقتی مقداری را داخل setItems میگذارید باید داخل تابع یا تابع event handler قرار بگیره و شما مستقیم نمیتونید تو useEffect اجراش کنید هم چنین hook useState ارایه تعریفش کردید و شما تابع پاس دادید اگر تابع تان ارایه بر نگردونه به مشکل میخورید سعی کنید خود تابع تان را تعریف کنید و بعد تو (data )setItems قرار بدید.
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Layout from "../Layout";
import { getBookmark } from "./Bookmarks";
import BookmarkList from "./BookmarkList";
const Bookmark = () => {
const [items, setItems] = useState([]); // Inja hook Array tarif kardid
const data = getBookmark(); // Array
// console.log(data) begir bebin array pas mide
useEffect(() => {
getDataItems();
}, [items]);
const getDataItems = () => {
setItems(data);
}
const showItems = items => {
return (
<div className="row">
<div className="col-12">
<h5 className="text-center text-muted"></h5>
<table
className="table table-sortable table-striped"
width="100%"
>
<tbody>
{items.map((key, item) => (
<BookmarkList
key={key}
dcdd={item}
showRemoveBookmarkButton={true}
/>
))}
</tbody>
</table>
</div>
</div>
);
};
const noItemsMessage = () => (
<h5 className="text-center text-muted">
<br /> <Link className="co" to="/dcdd">dcdd</Link>
</h5>
);
return (
<Layout
title="dcdd"
description=""
className="container-fluid"
>
{items.length > 0 ? showItems(items) : noItemsMessage()}
</Layout>
);
};
export default Bookmark;
خیلی ممنونم از شما که وقت گذاشتید
تابع آرایه رو پاس میده
اینم کد getBookmark که آیتم ها رو از localStorage میگیره
export const getBookmark = () => {
if (typeof window !== "undefined") {
if (localStorage.getItem("bookmark")) {
return JSON.parse(localStorage.getItem("bookmark"));
}
}
return [];
};
دوست عزیز localStorage بر اساس کلید و مقدار (key: value) ذخیره میشه نمیدونم چطوری setItem و اینجا شما یک ارایه خالی را تو اینجا پاس دادید
export const getBookmark = () => {
if (typeof window !== "undefined") {
if (localStorage.getItem("bookmark")) {
return[ JSON.parse(localStorage.getItem("bookmark"))];
}
}
};
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟