x
2 سال پیش توسط x مطرح شد
3 پاسخ

اخطار مکرر در پروژه ریکت

سلام به همه دوستان خسته نباشید
من با یک اخطاری روبرو شدم که بصورت مکرر تکرار میشه

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 با حذف کردن یک پست از لیست باید صفحه رو رفرش کنم تا از لیست حذف شه

ممنون میشم اگه کسی بتونه کمکم کنه این مشکلمو حل کنم


ثبت پرسش جدید
Banana Life
@shift.delete 2 سال پیش آپدیت شد
0

سلام
وقتی مقداری را داخل 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;

x
تخصص : هیچولوژیست
@SZaaaa1111 2 سال پیش مطرح شد
0

خیلی ممنونم از شما که وقت گذاشتید

تابع آرایه رو پاس میده
اینم کد getBookmark که آیتم ها رو از localStorage میگیره

export const getBookmark = () => {
    if (typeof window !== "undefined") {
        if (localStorage.getItem("bookmark")) {
            return JSON.parse(localStorage.getItem("bookmark"));
        }
    }
    return [];
};

Banana Life
@shift.delete 2 سال پیش آپدیت شد
0

دوست عزیز localStorage بر اساس کلید و مقدار (key: value) ذخیره میشه نمیدونم چطوری setItem و اینجا شما یک ارایه خالی را تو اینجا پاس دادید

export const getBookmark = () => {
    if (typeof window !== "undefined") {
        if (localStorage.getItem("bookmark")) {
      return[ JSON.parse(localStorage.getItem("bookmark"))];       
        }
    }
};

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام