Object.defineProperty 在我的 react.js 应用程序中调用了非对象

Question

我试图在上传到我的 react.js 应用程序之前更改文件名：

方法如下：

onInputChange = (e) =>{

    let newFileName='dp';
    if(e.target.files.length!==0){
        this.state.file=e.target.files[0];

        Object.defineProperty(this.state.file.name, 'name', {
            writable: true,
            value: newFileName
        });
        console.log(this.state.file);
    }
};

但问题是，每当调用此函数时，我都会收到一条错误消息： Object.defineProperty 调用了非对象

如何解决这个问题？

Answer 1

this.state.file.name是字符串，不是对象吧？也许你的意思是 this.state.file？而且这不是新的属性。你只是在改变价值。那为什么不 this.state.file.name = newFileName?

作为，您可能需要 file.filename，而不是 file.name。

Answer 2

您正在 Object.defineProperty 中的字符串基元上定义新的属性。 this.state.file.name 是一个字符串原语而不是一个对象。

const onInputChange = (e) =>{
    
        let newFileName='dp';
        if(e.target.files.length!==0){
            const file = e.target.files[0];
            // file is an object
            // Since file.name is read-only, this is not the proper way to change the name
            // For a file object writable is already true
            Object.defineProperty(file , 'name', {
                value: newFileName
            });
            console.log(file.name);
   
            // Since file name is readonly, and cannot be changed after the File is created
            // This is an alternate way to set the name on a copy of the file object
            const blob = file.slice(0, file.size, file.type); 
            newFile = new File([blob], newFileName, {type: file.type});
            console.log(newFile.name);
       }
};
document.querySelector("#fileInput").addEventListener("change", onInputChange);

Upload here:
<input type="file" name="test" id="fileInput"/>

另外更新状态不要直接改变 this.state 而是使用 setState() 方法来更新它。

Object.defineProperty 在我的 react.js 应用程序中调用了非对象

Object.defineProperty called on non-object in my react.js application

javascript

defineproperty

reactjs