Question 33879 in React native Question posted in
The official React Native documentation can be found here.

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>
  );
Tags:

3

Answers


  1. 0

    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>
  );
    Login or Signup to reply.
  2. 0

    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();
}, []);
    Login or Signup to reply.
  3. 0

    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>
  );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search