Question

我已经搞混了太久了，我不知道为什么文件没有被添加到本地状态。这是代码：

onFileSelect(event){
  console.log(event.target.files[0]);
  let name = event.target.files[0].name;
  let photoObject = event.target.files[0];
  console.log(photoObject);
  this.setState({ photoName: name, photo: photoObject }, function () {
    console.log('from state:' + JSON.stringify(this.state.photo));
    console.log('state is; ' + JSON.stringify(this.state));
  });
}

这是文件输入：

<div className="custom-file">
  <input
    type="file"
    className="custom-file-input"
    onChange={this.onFileSelect}
    id="customFile"
  />
  <label className="custom-file-label" for="customFile">
    {this.state.photoName}
  </label>
</div>

在console.log的setState回调中，我得到：

来自状态：{}

状态为； {“ yardName”：“请”，“ yardLat”：“”，“ yardLng”：“”，“ yardType”：“常规”，“ photoName”：“ splash.jpg”，“ photo”：{}，“错误“：{}}

我们非常感谢您的帮助。

Answer 1

我认为问题在于您滥用了this。

this.setState({photoName:name,photo:photoObject},
function(){
   console.log('from state:' + JSON.stringify(this.state.photo));
   console.log('state is; ' + JSON.stringify(this.state));
})

在console.log函数中，this表示函数本身。所以您应该使用如下箭头功能

this.setState({photoName:name,photo:photoObject},
() => {
   console.log('from state:' + JSON.stringify(this.state.photo));
   console.log('state is; ' + JSON.stringify(this.state));
})

Answer 2

由于代码中的setState回调函数是常规函数，因此无法在其中使用它，因此@Conan Lee提到您需要将其更改为Arrow函数或绑定函数以使此上下文可用于访问更新状态

使用.bind（this）绑定函数，如下所示

    onFileSelect(event){
       console.log(event.target.files[0]);
       let name = event.target.files[0].name;
       let photoObject = event.target.files[0];
      console.log(photoObject);
      this.setState({ photoName: name, photo: photoObject     }, function () {
     console.log('from state:' +    JSON.stringify(this.state.photo));
     console.log('state is; ' + JSON.stringify(this.state));
    }.bind(this)}
 }

尝试将文件添加到组件状态不起作用

2 个答案: