Javascript 如何修复未捕获的TypeError:无法读取属性'；名称'；未定义的

单击“上载”按钮时，出现以下错误：

未捕获的TypeError:无法读取未定义的属性“name”

当我点击上传按钮时会发生这种情况。我正在使用带有事件箭头函数的

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);
    })
  }

我的代码哪里出了问题？

因此根据doc（），

有一个特殊的地方，它不能用作受控组件

解决方案是使用

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>
        /* ... */
    )
}

构造函数（道具）{
超级（道具）
this.fileInput=React.createRef（）
}
fileUploadHandler=（）=>{
const fb=新表单数据（）
fb.append（'image'，this.fileInput.current.files[0]，this.fileInput.current.files[0].name）
/* ... */
}
render（）{
返回(
/* ... */
上传
/* ... */
)
}

那么就不需要设置状态了。

因此根据doc（），

有一个特殊的功能，它不能用作受控组件

解决方案是使用

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>
        /* ... */
    )
}

构造函数（道具）{
超级（道具）
this.fileInput=React.createRef（）
}
fileUploadHandler=（）=>{
const fb=新表单数据（）
fb.append（'image'，this.fileInput.current.files[0]，this.fileInput.current.files[0].name）
/* ... */
}
render（）{
返回(
/* ... */
上传
/* ... */
)
}

---

那么就不需要

setState

。

在setState之前尝试console.log（event.target&&event.target.file&&event.target.file[0]），在fb.append之前尝试console.log（this.state.selectedFile）文件输入的jsx代码是什么样的？上传文件：上传确定我有答案。请在设置状态之前尝试console.log（event.target&&event.target.file&&event.target.file[0]）和console.log（this.state.selectedFile）在fb.appender之前，文件输入的jsx代码是什么样子的？上传文件：上传确定我有一个答案。我还想问我如何绑定函数以显示在我的数据列表中。我还想问我如何绑定函数以显示在我的数据列表中。