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

当我单击上载按钮时，出现此错误：


  未捕获的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);
    })
  }

我的代码哪里出错了？

最佳答案

因此，根据文档（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。

关于javascript - 如何修复Uncaught TypeError:无法读取未定义的属性“名称”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59282095/