在ReactJS中以“未处理的拒绝TypeError：that.setState不是函数”的方式获取错误

如何解决在ReactJS中以“未处理的拒绝TypeError：that.setState不是函数”的方式获取错误

我目前正在研究一个动态图表，该图表会根据Slider值进行更改。我搜索了一个解决方案，每个人都说我需要绑定它才能使此错误消失。但是我仍然尝试以所有可能的方式绑定该函数，但仍然出现此错误：

未处理的拒绝（TypeError）：that.setState不是函数。

相关代码：

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,slideValue: 200,slidebgColor: "47CF8E",type: 'bar',data: {
        labels: [0],datasets: [{
          label: '',data: [0,1],backgroundColor: [
            'rgba(255,99,132,0.2)'
          ]
        }]
      },options: {
        legend: {
          display: false
        },scales: {
          yAxes: [{
            display: false,ticks: {
              beginAtZero: true,autoskip: true
            }
          }],xAxes: [{
            display: false
          }]
        }
      }
    }
    this.handleSliderEvent = this.handleSliderEvent.bind(this);
  }

  componentDidMount() {
    console.log("inside componentDidMount");
  }

  getChartData = e => {
    const data1 = this.state.data;
    const slideValue = this.state.slideValue;
    const backColor = ["pink","purple","blue","green","lightblue","neon","red","lightgreen","yellow","grey","lightgrey","orange"]

    for (let i = 0; i < slideValue; i++) {
      const randomNumber = Math.ceil(Math.random() * slideValue);

      data1.labels[i] = randomNumber;
      data1.datasets[0].data[i] = randomNumber;
      data1.datasets[0].backgroundColor[i] = "purple";
    }

    this.setState = {
      data: data1
    }

    return data1;
  }

  handleSliderEvent = async (event) => {
    let slideValue1 = event;
    let that = this;

    that.setState({
      slideValue: slideValue1
    })
  };

  render() {
    const type = this.state.type;
    const options = this.state.options;
    const data = this.state.data;
    const slideValue = this.state.slideValue;
    const value = this.state.value;

    return (
      <div style={{ display: "inline-flex" }}>
        <div style={{ height: 400,display: "inline-flex",paddingLeft: "20px" }}>
          <Slider
            defaultValue={200}
            vertical
            progress
            min={0}
            max={this.state.slideValue}
            onChange={this.handleSliderEvent}
          />
        </div>
        <div style={{ display: "inline-flex",position: "relative",width: 600,height: 550,paddingLeft: "10%" }}>
          <Bar
            type={type}
            options={options}
            data={this.getChartData}
          />
        </div>
      </div>
    );
  }
}

export default Home;

任何人都可以建议出什么问题了吗？

解决方法

您正在呼叫：

that.setState(...);

而不是：

this.setState(...);

您的代码应如下所示：

handleSliderEvent = async (event) => {
    let slideValue1 = event;
    // let that=this;

    console.log("slideValue :",slideValue1)

    //that.setState ({
    this.setState({
        slideValue: slideValue1
    });

    console.log(this.state.slideValue);
};

,

是否有使用let that = this的理由？

做类似的事情更好吗？

 handleSliderEvent = async (event) => {
    
        this.setState({
            slideValue: event
        })
      };

除了我相信您的TypeError来自其他地方：

getChartData=e=>{
...

this.setState = { data: data1 }

代替使用：

 this.setState({ data: data1 })

,

问题在于getChartData中的这段代码：

this.setState = {
  data: data1
}

您要重新分配setState函数，而不用更新的数据调用它。这意味着下次您尝试调用this.setState时，它将中断，因为现在它是一个对象而不是函数。只需将其更改为此：

this.setState({
  data: data1
})

此外，如注释中所述：let that = this以及构造器中的绑定都是无用的。箭头功能不需要该替代方法。