时间戳

首页 > 解决方案 > 为什么我点击按钮后没有任何价值？

javascript - 为什么我点击按钮后没有任何价值？

问题描述

我将图像数组的值设置为“”。每当我移动这 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>
);

我希望在我第一次单击按钮后的输出，实际输出但在我第一次单击按钮后，这些数组中的实际输出没有。在此处输入图像描述

标签： javascriptreactjsarray-map

解决方案

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

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

`

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

推荐阅读