React+Tauri图片加载失败：无法读取undefined的buffer属性

你的代码出现Cannot read properties of undefined (reading 'buffer')错误，核心原因是useState的初始化函数无法正确返回异步获取的Uint8Array：

• readBinaryFile是异步方法，返回Promise，而useState的初始化函数同步执行，导致初始的content是undefined，渲染img标签时访问content.buffer自然报错。
• 原生JS中可能是在异步回调里直接操作DOM，不会有React状态初始化的时序问题，所以能正常运行。

修正后的代码 #

import { useEffect, useState } from 'react';
import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

export default function FsView(props: any) {
    // 初始状态设为空Uint8Array，避免undefined
    const [content, setContent] = useState<Uint8Array>(new Uint8Array());

    useEffect(() => {
        const fetchImage = async () => {
            // 处理文件路径
            const filePath = (props.path.replace(props.baseDir, "") + '/images/00000.jpg').replace(/\//, '');
            try {
                const result = await readBinaryFile(filePath, { dir: BaseDirectory.Home });
                console.log(result.buffer);
                setContent(result);
            } catch (err) {
                console.error('读取文件失败:', err);
            }
        };

        fetchImage();
    }, [props.path, props.baseDir]); // 依赖props变化时重新读取

    // 只有当content有数据时才生成Blob URL
    const imageUrl = content.length > 0 ? URL.createObjectURL(new Blob([content.buffer], { type: 'image/jpg' })) : '';

    return (
        <>
            {imageUrl && <img src={imageUrl} alt="加载的图片" />}
        </>
    );
}

关键修正点 #

• 把异步文件读取逻辑移到useEffect中，确保组件挂载后执行异步操作，通过setContent更新状态。
• 初始化content为new Uint8Array()，避免初始状态是undefined。
• 增加条件渲染，只有当content有数据时才渲染img标签，防止空状态下报错。
• 添加错误捕获，便于排查文件读取失败的问题。

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