Почему я не получаю значения после нажатия кнопки?

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

Я ожидаю, что после первого нажатия кнопки но фактический вывод отсутствует в этих массивах после того, как я впервые нажал кнопку.

Answer 1

В вышеприведенном коде нужно учесть, что функция setState является асинхронной. Не обязательно, чтобы console.log печатал значение изображений, назначенных вами в методе setState, если вы не используете следующий синтаксис:

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

`

Это может быть печать старых значений состояния на вашей консоли.