React中向useRef对象的Images数组push元素时触发TypeError错误

错误原因 #

你通过useRef创建的post_data是一个Ref对象，它存储的实际数据在.current属性中。直接访问post_data.Images相当于在Ref对象本身上查找Images键，而Ref对象并没有这个属性，因此会抛出undefined无法读取push的错误。

解决方案 #

1. 修正useRef的访问方式 #

访问Ref存储的对象时必须加上.current，修改触发错误的代码：

// 原错误代码
post_data.Images.push("test");

// 修正后
post_data.current.Images.push("test");

完整修正后的onChange事件代码：

<input 
    accept='.pdf, .docx, .ppt, .png, .jpg' 
    multiple="multiple" 
    onChange={(e) => {
        if (e.target.files[0]) {
            let str = "";
            
            for (let i = 0; i < e.target.files.length; i++) {
                // 关键：通过.current访问Ref存储的实际对象
                post_data.current.Images.push("test");
                if (i === e.target.files.length - 1) {
                    str += e.target.files[i].name;
                    break;
                }
                str += e.target.files[i].name + ", ";
            }
            
            console.log(post_data.current); // 查看数据也要加.current
            setFileName(str);
        }
    }} 
    id="dropzone-file" 
    type="file" 
    className="hidden" 
/>

2. 注意useRef的适用场景 #

如果post_data需要参与组件渲染（比如在页面上展示Images的内容），useRef并不适合——因为它的变更不会触发组件重渲染。这种情况下建议改用useState来管理数据：

// 用useState替代useRef
const [postData, setPostData] = useState({
    Title: "",
    Content: "",
    Course: "",
    Year: 1,
    Documents:[{
        Name: "test",
        URL:"test"
    }, {
        Name: "hey",
        URL: "Hey"
    }],
    Images: [],
});

更新Images时要遵循React状态不可变原则，通过浅拷贝的方式更新：

onChange={(e) => {
    if (e.target.files[0]) {
        let str = "";
        // 先收集所有要添加的内容，避免多次调用setPostData
        const newImages = [...postData.Images];
        for (let i = 0; i < e.target.files.length; i++) {
            newImages.push("test");
            if (i === e.target.files.length - 1) {
                str += e.target.files[i].name;
                break;
            }
            str += e.target.files[i].name + ", ";
        }
        // 一次性更新状态
        setPostData(prev => ({
            ...prev,
            Images: newImages
        }));
        setFileName(str);
    }
}}

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