React useState 没有更新 Array.map function 中的值

Question

I'm having trouble when updating the state inside array.map. What i am trying to do is, i get data from the firestore and using the below login;

const [storedImages, setStoredImages] = useState([]);

(async () => {
  setInterval(async () => {
    await friends.map(async key => {
      const getImagesFromStore= await db
        .collection('users')
        .doc(key) //XYZ
        .collection('uploadedImages')
        .get();
      const userExistsInList = (users, user) => { //checks if the user exists in storedImages
        return users?.hasOwnProperty(user);
      };
      const newStoryAlreadyInStories = (allImages, newImage) => { //checks if image already exists in the storedImages
        return allImages.find(s => s.id === newImage.id);
      };
      const appendStory = (originalObject, userId, imageToAppend) => {
        return {
          ...originalObject,
          [userId]: {
            ...originalObject[userId],
            uploadedImages: originalObject[userId].uploadedImages.concat({
              id: imageToAppend.id,
              img: imageToAppend.data().image,
              timestamp: imageToAppend.data().createdAt,
            }),
          },
        };
      };
      if (getImagesFromStore && getImagesFromStore.docs.length !== 0) {
        if (storedImages.length !== 0) {
          const newState = storedImages.map(user => {
            if (userExistsInList(user, key)) {
              let updatingStory;
              getImagesFromStore.docs.forEach(story => {
                const found = newStoryAlreadyInStories(stories, story);
                if (!found) {
                  //User is already in state and the new story is not in the list
                  updatingStory = appendStory(user, key, story);
                }
              });
              return updatingStory;
            } else {
              //User is not in the list yet
            }
          });
          setStoredImages(newState);
        } else {
          await getImagesFromStore.docs.map(async image => {
            const getUsersDetail = await db
              .collection('users')
              .doc(key)
              .get();
            setStoredImages([
              {
                [key]: {
                  name: getUsersDetail.data().name,
                  displayPic: getUsersDetail.data().profileAvtar,
                  uploadedImages: [
                    {
                      id: image.id,
                      img: image.data().image,
                      timestamp: image.data().createdAt,
                    },
                  ],
                },
              },
            ]);
          });
        }
      }
    });
  }, 10000);
})();

The above codes works fine for the first iteration/interval when i use console.log(storedImages) i get the result as expected but after the second iteration/interval i only get the 1st or previous result.

Answer 1

The state is being updated but the interval function is not aware of this updates. To get the current state value inside setInterval / setTimeout function you can use setStoredImages callback function:

setStoredImages((prev) => {
  if (prev.length !== 0) {
    //--> your logic
    return newState;
  } else {
    //--> else logic
    return [
      {
        [key]: {
          name: getUsersDetail.data().name,
          displayPic: getUsersDetail.data().profileAvtar,
          uploadedImages: [
            {
              id: image.id,
              img: image.data().image,
              timestamp: image.data().createdAt,
            },
          ],
        },
      },
    ];
  }
});