为什么单击按钮后我没有任何价值？

Question

我将图像数组的值设置为“”。每当我移动这4张图像之一，然后单击按钮。我希望返回一个新数组，以获取四个图像的信息之一，例如src，x和y坐标。相反，我在数组中为空。

this.state = {
  title: this.props.title || '',
  images: [{
    image: this.props.image || "",
    x: this.props.x || "",
    y: this.props.y || ""
  }],
}

handleSubmit = () => {
let getImagesList = Array.prototype.slice.call(document.querySelectorAll('img'));

console.log(getImagesList);

getImagesList.map(data => {
  if(data.dataset.x > 0) {

    console.log(data);

    var arr = [{
      image: data.src,
      x: data.dataset.x,
      y: data.dataset.y
    }]
    this.setState({
      images: this.state.images.concat(arr)
    })

    console.log("successfully added");
    console.log(this.state.images)
  }

return (
  <div className="Wrapper"> 
    <div className="overallshapes">
      <div className="select_image">
        {image_url}
      </div> 
    </div>
    <div>
      <button onClick={this.handleSubmit}>
        Save
      </button>
      <button onClick={this.props.onFormClose}>
        Cancel
      </button>
    </div>
  </div>
);

我希望在我首先单击按钮https://wiki.appcelerator.org/display/guides2/Titanium+CLI+Options#TitaniumCLIOptions-cli.logLevel之后输出，但是在我第一次单击按钮之后，这些数组中的实际输出都不存在。

Answer 1

在上面的代码中要考虑的一件事是setState函数是异步的。除非您使用以下语法，否则console.log不必打印您在setState方法中分配的图像的值，除非您使用以下语法：

`this.setState({
  images: this.state.images.concat(arr)
}, () => {
  console.log(this.state.images);
})

`

它可以在控制台上打印状态的旧值。