ResolvedWeb

[SOLVED] Not deleting at first

Dec 27, 2023, 20:36

View on Discord

Votes

Replies

Participants

Unknown

Messages

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋Original post

Rank 2: Process

Jun 28, 2023, 13:53

and after that it reloads the page

Summary

The user was experiencing an issue with their delete function causing the page to infinitely call a function. Another user pointed out that the issue was likely caused by the `useEffect` hook depending on the `todos` state, which was being changed in the `loadData` function. The user shared their code and explained that adding a payload to the `useEffect` hook caused the infinite loop. Another user suggested that adding a reload after deleting a todo is not the right approach and asked why it was necessary. The user shared their code for the delete function, which included a `window.location.reload()` after deleting. The other user questioned why

Drake

Jun 28, 2023, 14:00

i don't see the print statement 🧐

Drake

Jun 28, 2023, 14:06

also it seems like the page is refreshing? 🧐

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 14:07

yes bcz after printing the statement page relaods itself

Drake

Jun 28, 2023, 14:07

why?

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 14:08

const deleteTodoHandler = async (id) => {
    try {
      db.deleteDocument(
        import.meta.env.VITE_APPWRITE_DATABASE_ID,
        import.meta.env.VITE_APPWRITE_COLLECTION_ID,
        id
      );
      console.log('deleted');
      window.location.reload();
    } catch (err) {
      console.log(err);
      window.location.reload();
    }
  };

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 14:08

here is the code

Drake

Jun 28, 2023, 14:08

why are you adding the reload?

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 14:08

to render the list after newly add item or deleting item

Drake

Jun 28, 2023, 14:09

i don't think that's the right approach...

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 14:10

I know but in the useEffect function if I gave the any payload or leave it empty it calls the function infinitely

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 14:10

useEffect(() => {
    const loadData = async () => {
      setLoader(true);
      try {
        const getTodos = await db.listDocuments(
          import.meta.env.VITE_APPWRITE_DATABASE_ID,
          import.meta.env.VITE_APPWRITE_COLLECTION_ID
        );
        setTodos(getTodos.documents);
      } catch (err) {
        console.log(err);
      }
    };
    loadData();
    setLoader(false);
  }, []);

Drake

Jun 28, 2023, 14:20

how do you know it calls the function infinitely?

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 14:25

see this video

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 14:25

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 14:25

if I gave any payload then its happening

Drake

Jun 28, 2023, 14:47

what do you mean?

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 15:23

useEffect(() => {
    const loadData = async () => {
      setLoader(true);
      try {
        const getTodos = await db.listDocuments(
          import.meta.env.VITE_APPWRITE_DATABASE_ID,
          import.meta.env.VITE_APPWRITE_COLLECTION_ID
        );
        setTodos(getTodos.documents);
      } catch (err) {
        console.log(err);
      }
    };
    loadData();
    setLoader(false);
  }, [todos]);

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 15:23

I mean this code

Drake

Jun 28, 2023, 15:26

yes, that's causing the infinite loop. That todos at the bottom means "run this whenever todos changes" and you're changing todo in the loadData function. Does that make sense?

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 15:33

Yes I know but I found a solution using useReducer

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 15:34

Its work on the submit function and load function correctly

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jun 28, 2023, 15:34

Now I'm implementing it on the deleting function

𝙁𝘼𝙇𝙇𝙀𝙉𝘾𝘼𝙋

Rank 2: Process

Jul 1, 2023, 06:31

Thanks @Steven to help me. Now it is working perfectly.

Drake

Jul 1, 2023, 13:35

[SOLVED] Not deleting at first

Join the discussion

Reply to this thread by joining our Discord.

Reply on Discord

Need support?_

Join Discord Get premium support