Question

我正在尝试了解图像上传过程如何与React一起工作。我有一个接受图像数据的输入和一个将信息设置为变量的处理程序，但是我做错了什么，不确定是什么。我想使用图片信息更新状态下的图片，而让其他项目保持单独状态。当我执行以下操作时，图片状态之后的console.log保持为空。

class Profile extends Component {
  constructor() {
    super();
    this.state = {
      userName: "",
      userEmail: "",
      picture: null
    };
    this.handleNewImage = this.handleNewImage.bind(this);
  }

  handleNewImage = event => {
    this.setState({
      picture: event.target.files[0]
    })
    console.log(this.state.picture); //gives null still 
  }

  render() {
    return (
      <input type='file' onChange={this.handleNewImage} />
    );
  }
}

Answer 1

这可能与图像无关，而是对setState的理解。 React的setState是异步操作，因此状态更新完成后，您需要控制台日志：

handleNewImage = event => {
  this.setState({
    picture: event.target.files[0]
  }, () => {
    console.log(this.state.picture);
  });
}

更多信息在这里：

无法将输入图片数据保存在状态变量React.js中

1 个答案: