Javascript 将错误获取为"；未处理的拒绝（TypeError）：that.setState不是函数；在ReactJS中

我目前正在制作一个动态图表，它会根据滑块值进行更改。我搜索了一个解决方案，每个人都说我需要绑定它来消除这个错误。但是，我尝试以所有可能的方式绑定函数，但仍然出现以下错误：

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

相关代码：

class Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：0，
幻灯片价值：200，
幻灯片颜色：“47CF8E”，
类型：'bar'，
数据：{
标签：[0]，
数据集：[{
标签：“”，
数据：[0,1]，
背景颜色：[
'rgba（255,99,132,0.2）'
]
}]
},
选项：{
图例：{
显示：假
},
比例：{
雅克斯：[{
显示：假，
滴答声：{
贝吉纳泽罗：是的，
autoskip：对
}
}],
xAxes：[{
显示：假
}]
}
}
}
this.handleSliderEvent=this.handleSliderEvent.bind（this）；
}
componentDidMount（）{
日志（“内部组件安装”）；
}
getChartData=e=>{
const data1=this.state.data；
const slideValue=this.state.slideValue；
常量背景色=[“粉色”、“紫色”、“蓝色”、“绿色”、“浅蓝色”、“霓虹灯”、“红色”、“浅绿色”、“黄色”、“灰色”、“浅灰色”、“橙色”]
for（设i=0；i{
设slideValue1=事件；
让那=这；
那是一个州({
slideValue:slideValue 1
})
};
render（）{
const type=this.state.type；
const options=this.state.options；
const data=this.state.data；
const slideValue=this.state.slideValue；
常量值=this.state.value；
返回(
);
}
}
导出默认主页；

有人能告诉我哪里出了问题吗？

您的电话：

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

此外，我相信你的打字错误来自其他地方：

getChartData=e=>{
...

this.setState = { data: data1 }

而不是使用：

 this.setState({ data: data1 })

---

问题在于

getChartData

中的这段代码：

this.setState={
数据：数据1
}

您正在重新分配

setState

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

this.setState({
数据：数据1
})

---

此外，如注释中所述：

let that=this

与构造函数中的绑定一样无用。箭头函数不需要这种解决方法。

我以前尝试过这个.setState（…），但它也不起作用。谢谢Russell，但它仍然不起作用。我刚才又试了一次。还有什么建议吗？以前您尝试过

this.setState={}。如果您再试一次，也就是说，
this.setState={slideValue:slideValue1}
@brianthonpson，给出的错误是“未处理的拒绝（TypeError）：that.setState不是一个函数”，在代码示例
中，已分配了此.setState
to@BrianThompson我已经看过你的答案了，我同意。我承认在我没有仔细观察的地方失败了：DIt是一个箭头函数，所以在构造函数中绑定
这个
是没有必要的。与
一样不必要，让that=this
。还有一个原因是函数是异步的吗？是的，“let that=this”是多余的，我最初没有使用它。但是由于我的解决方案不起作用，所以我尝试将“this”存储到“that”中只是为了进行更改（在网上的某个地方阅读）。我相信您的错误来自getChartData，因为您使用的setState是这样的：this.setState={data:data1}而不是this.setState（{data:data1}）；你好，Mounique，我更改了getChartData，现在我得到了一个新错误，如下所示：“错误：超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。”有什么想法吗？@AnkitL这是一个新错误和新问题。如果你想不出来，你应该为它提出一个新问题。然后，您可以为问题提供适当的上下文，例如格式化的错误消息、
滑块
和
条
的代码、库名称或组件代码等。此处的问题与新的错误消息无关，因此将来的读者会感到困惑。@Brianthonpson感谢您的支持。如果我不能解决这个新问题，我会问一个新问题。嗨，Brian，我把它改为：this.setState=（{data:data1}）。但我仍然得到同样的错误。@AnkitL不，这仍然是一个任务。删除
=
。它需要是一个函数调用。你可以完全按照我在答案中所说的复制它，这就是它所需要的。谢谢Brian，这个错误已经消失了，但是现在遇到了一个新的错误。“错误：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。”有什么想法吗？酷。该错误与此错误的原因无关，因此您正在取得进展！某种东西正在触发一个无限的setSt