更改状态后反应本机视图不会更新答案

【问题标题】：react native view won't update after changing state更改状态后反应本机视图不会更新
【发布时间】：2022-11-17 01:01:39
【问题描述】：

打开我的组件时，我想从媒体文件夹中获取资产（效果很好），然后将其传递给另一个组件。问题在于，首次启动应用程序时，“listOfAssets”状态为空，刷新时，它会存储所有必要的资产。

我怎样才能实现第一次存储资产并且我不必刷新它。

我的异步代码会不会有问题？

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

【问题讨论】：

标签： javascript reactjs react-native async-await

【解决方案1】：

你应该调用你的设置函数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>
  );

【讨论】：