更改 state 后反應本機視圖不會更新

Question

打開我的組件時，我想從媒體文件夾中獲取資產（效果很好），然后將其傳遞給另一個組件。 問題是，當第一次啟動應用程序時，“listOfAssets”state 是空的，當刷新它時，它存儲了所有必要的資產。

我怎樣才能實現第一次存儲資產並且我不必刷新它。

我的異步代碼會不會有問題？

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

Answer 1

您應該調用您的設置 function setListOfAssets而不是執行listOfAssets.push 。 就像是

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

或者根本不使用 .map 來進一步簡化它，因為它實際上並沒有添加任何東西。

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

Answer 2

請嘗試更新您的 useEffect 代碼塊，如下所示：

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();
}, []);

Answer 3

React 中的所有狀態都是不可變的，您需要在每次嘗試使用重組時輸入一個新值或 object，並且您需要使用一個 set 方法來調用一個新的 state 並調用一個渲染方法來更新視圖。

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