无法使用通过 onClick() 调用的 this.setState() 设置我的状态变量答案

【问题标题】：Unable to set my state variables using this.setState() which is called through onClick()无法使用通过 onClick() 调用的 this.setState() 设置我的状态变量
【发布时间】：2019-06-07 19:45:50
【问题描述】：

当鼠标通过 onClick={this.handleClick} 在画布元素上单击时，我正在获取鼠标坐标。在 handleClick 方法中，我将坐标计算为“xaxis”和“yaxis”，并通过 setState 将这些值设置为状态变量“x”和“y”。我得到的是显示的预定义值而不是计算值。

import React from "react";
import "./Canvas.css";

export default class Canvastest extends React.Component{

constructor(){
    super()
    this.state={
        x:0,
        y:0
    }       
}

 handleClick=(e)=>{

    console.log("test");
    const canvas = this.refs.cvs;
    const ctx = canvas.getContext("2d");
    let rect =canvas.getBoundingClientRect();
    let xaxis = e.clientX - rect.left;
    let yaxis = e.clientY - rect.top;
    console.log("xaxis : "+xaxis);
    console.log("yaxis : "+yaxis);

    this.setState({x:xaxis});
    this.setState({y:yaxis});
    console.log(this.state.x);
    console.log(this.state.y);  
    ctx.fillStyle = "green";
    ctx.beginPath();
    ctx.arc(xaxis, yaxis, 6, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
    ctx.save();      
  }


  render(){
    return(
        <div>
            <canvas ref="cvs" height="300" width="300" onClick= 
              {this.handleClick}></canvas>

        </div>
    );
  }
 }


 actual results : 
 test
 Canvastest.js:24 xaxis : 88
 Canvastest.js:25 yaxis : 102
 Canvastest.js:29 0
 Canvastest.js:30 0
 Canvastest.js:18 test
 Canvastest.js:24 xaxis : 201
 Canvastest.js:25 yaxis : 169
 Canvastest.js:29 88
 Canvastest.js:30 102

 Expected results : 

 test
 Canvastest.js:24 xaxis : 88
 Canvastest.js:25 yaxis : 102
 Canvastest.js:29 88
 Canvastest.js:30 102
 Canvastest.js:18 test
 Canvastest.js:24 xaxis : 201
 Canvastest.js:25 yaxis : 169
 Canvastest.js:29 201
 Canvastest.js:30 169
 so on...

【问题讨论】：

您的意思是在 setState 之后立即在“consol.log(this.state.x)”中获得预定义的值吗？请记住 setState 是异步的
我将首先加入这两个 setState 方法：this.setState({ x: xaxis, y: yaxis }) 并且您还尝试在设置后立即访问状态。尝试在您的渲染方法中执行console.log(this.state)。我认为您正在尝试在生命周期实际发生之前记录状态值。

标签： reactjs html5-canvas

【解决方案1】：

这是意料之中的，因为您试图在 setState 函数完成设置新值之前输出值。尝试在下面查看更新的值。您可以按如下方式一次性设置您的状态。

this.setState({x:xaxis,y:yaxis},()=>{
    console.log(this.state.x);
    console.log(this.state.y);
});

【讨论】：