CODEWITHSUNDEEP
javascriptreactjsreact-nativeasync-await
Broump
Broump

Reputation: 363

react native view won't update after changing state

When opening my component, I want to get Assets from a Media Folder (which works fine) and then passing it through to another component. The Problem is that when first launching the app, the "listOfAssets" state is empty and when refreshing it, it stores all necessary Assets.

How can I achieve that the Assets are getting stored the first time and that I don't have to refresh it.

Could there be a problem with my async code?

const [listOfAssets, setListOfAssets] = useState([]);

useEffect(() => {
    async function getAssets() {
      const assets = await MediaLibrary.getAssetsAsync({
        album: folderToSort,
        includeSmartAlbums: true,
      });

      assets.assets.map((asset) => {
        listOfAssets.push({
          id: asset.id,
          uri: asset.uri,
          height: asset.height,
          width: asset.width,
        });
      });
    }

    getAssets();
  }, []);

return (
    <View>
      <SlideComponent
        imageUri={listOfAssets}
        moveImageToGOAlbum={moveImageToGOAlbum}
      />
    </View>
  );

Upvotes: 0

Views: 108

Answers (3)

iddar
iddar

Reputation: 521

All states in React are immutable you need to put a new value or object each time you try to use restructuring and you need use a set method to invoque a new state and that call a render method to update the view.

const [listOfAssets, setListOfAssets] = useState([]);

useEffect(() => {
    async function getAssets() {
      const assets = await MediaLibrary.getAssetsAsync({
        album: folderToSort,
        includeSmartAlbums: true,
      });

      setListOfAssets([...listOfAssets, ...assets.assets])
    }

    getAssets();
  }, []);

return (
    <View>
      <SlideComponent
        imageUri={listOfAssets}
        moveImageToGOAlbum={moveImageToGOAlbum}
      />
    </View>
  );

Upvotes: 1

talent-jsdev
talent-jsdev

Reputation: 676

Please try to update your useEffect code block like below:

useEffect(() => {
    async function getAssets() {
        const assets = await MediaLibrary.getAssetsAsync({
            album: folderToSort,
            includeSmartAlbums: true,
        });

        let tempList = assets.assets.map((asset) => {
            return {
                id: asset.id,
                uri: asset.uri,
                height: asset.height,
                width: asset.width,
            };
        });

        setListOfAssets(tempList);
    }

    getAssets();
}, []);

Upvotes: 1

P. Brew
P. Brew

Reputation: 777

You should call your setting function setListOfAssets rather than doing listOfAssets.push. Something like

const [listOfAssets, setListOfAssets] = useState([]);

  useEffect(() => {
    const getAssets = async () => {
      const assets = await MediaLibrary.getAssetsAsync({
        album: folderToSort,
        includeSmartAlbums: true,
      });

      setListOfAssets(
        assets.assets.map(({ id, uri, height, width }) => ({
          id,
          uri,
          height,
          width,
        })),
      );
    };
    getAssets();
  }, []);

  return (
    <View>
      <SlideComponent
        imageUri={listOfAssets}
        moveImageToGOAlbum={moveImageToGOAlbum}
      />
    </View>
  );

Or simplify this further without the .map at all since it's not really adding anything.

const [listOfAssets, setListOfAssets] = useState([]);

  useEffect(() => {
    const getAssets = async () => {
      const assets = await MediaLibrary.getAssetsAsync({
        album: folderToSort,
        includeSmartAlbums: true,
      });

      setListOfAssets(assets.assets);
    };
    getAssets();
  }, []);

  return (
    <View>
      <SlideComponent
        imageUri={listOfAssets}
        moveImageToGOAlbum={moveImageToGOAlbum}
      />
    </View>
  );

Upvotes: 1

Related Questions