React Native组件首次加载媒体资产为空，视图不更新问题排查

你的问题核心在于直接修改了React状态数组，没有通过官方的状态更新函数触发组件重渲染，导致首次加载时状态更新后组件没刷新，数据没传递给子组件。

错误原因分析 #

你用listOfAssets.push()直接修改了state数组，但React的状态是不可变的，这种方式不会触发组件重新渲染。所以首次加载时虽然拿到了资产数据，但组件没更新，listOfAssets还是初始的空数组；刷新后可能因为其他触发重渲染的操作，才让修改后的数组被渲染出来。

修正后的代码 #

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

useEffect(() => {
    async function getAssets() {
        try {
            const assets = await MediaLibrary.getAssetsAsync({
                album: folderToSort,
                includeSmartAlbums: true,
            });
            
            // 用map生成新数组，通过setListOfAssets更新状态
            const formattedAssets = assets.assets.map((asset) => ({
                id: asset.id,
                uri: asset.uri,
                height: asset.height,
                width: asset.width,
            }));
            
            setListOfAssets(formattedAssets);
        } catch (error) {
            console.error("获取媒体资产失败:", error);
        }
    }

    getAssets();
}, [folderToSort]); // 注意：如果folderToSort是动态值，必须加入依赖数组

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

关键修正点 #

1. 通过setListOfAssets更新状态：用map生成新的资产数组，直接传给状态更新函数，这样React会检测到状态变化并触发组件重渲染，子组件就能拿到最新的资产数据。
2. 添加异常处理：捕获MediaLibrary.getAssetsAsync可能抛出的错误，方便调试和处理异常情况。
3. 完善依赖数组：如果folderToSort是从props或其他状态来的动态值，必须把它加入useEffect的依赖数组，这样当它变化时，会重新执行获取资产的逻辑，保证数据和当前文件夹同步。

内容的提问来源于stack exchange，提问作者Broump