Question

单击“上传”按钮时出现此错误：

未捕获的TypeError：无法读取未定义的属性“名称”

单击“上传”按钮时会发生这种情况。我正在使用带有事件箭头功能的fileSeletedHandler：

  fileSelectedHandler = event => { 
      this.setState({ selectedFile: event.target && event.target.file && event.target.file[0] }) 
    }

哪个工作正常，问题出在我单击“上传”按钮时。我正在使用带有箭头功能的fileUploadHandler：

  fileUploadHandler = () => {
      const fb = new FormData();
      fb.append('image', this.state.selectedFile, this.state.selectedFile.name);
    axios.post('http://localhost:5000/business/uploadFile', fb)
    .then(res => {
        console.log(res);
    })
  }

我的代码哪里出错了？

Answer 1

因此，根据文档（here），<input type={'file'}/>有一个特殊之处，那就是它不能用作受控组件。

解决方案是使用Ref。

所以就像这样：

constructor(props) {
   super(props)
   this.fileInput = React.createRef()
}

fileUploadHandler = () => {
    const fb = new FormData()
    fb.append('image', this.fileInput.current.files[0], this.fileInput.current.files[0].name)
    /* ... */
}

render() {
    return (
        /* ... */
        <input type='file' ref={this.fileInput}/>
        <button onClick={this.fileUploadHandler}>Upload</button>
        /* ... */
    )
}

那么不需要setState。

如何修复Uncaught TypeError：无法读取未定义的属性“名称”

1 个答案: