React this.setState未定义
React中的this.setState未定义是因为在使用class组件时，没有正确绑定this的原因。解决这个问题的方法有以下几种：
- 使用箭头函数：在事件处理函数中使用箭头函数，箭头函数会自动绑定当前组件的this。例如：
handleClick = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<button onClick={this.handleClick}>Click me</button>
);
}- 在构造函数中绑定this：在构造函数中使用bind方法将事件处理函数绑定到当前组件的this。例如：
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<button onClick={this.handleClick}>Click me</button>
);
}- 使用公共类字段语法：在类组件中使用公共类字段语法，它会自动将事件处理函数绑定到当前组件的this。例如：
handleClick = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<button onClick={this.handleClick}>Click me</button>
);
}以上是解决React中this.setState未定义的几种常见方法。在实际开发中，可以根据具体情况选择适合的方法来解决该问题。
参考链接：
相关·内容
2回答
如何在箭头函数中使用此关键字
reactjs、arrow-functions
据我所知，我们不能在箭头函数中使用this关键字。然而，在反应中，我看到这是可能的。我在想这怎么可能。示例：
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
&l
浏览 2提问于2020-12-03得票数 1
2回答
如何将事件处理程序放置在匿名函数中，以响应修复绑定问题？
javascript、reactjs、ecmascript-6
了解关于的知识，其他人能不能在下面这两种场景中使用绑定？如果您可以使用handleClick引用this.handleClick，为什么仍然需要绑定它？处理程序中的this不会已经指向组件了，因为调用处理程序的不是组件吗？此外，为什么将处理程序放置在匿名函数中也有效？
在JSX回调中，您必须小心这一点的含义。在JavaScript中，类方法在默认情况下不受绑定。如果忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时，这将是未定义的。
解决办法是：
class Toggle extends React.Component {
constructo
浏览 3提问于2016-11-09得票数 3
1回答
我是一个React新手，正在研究来自Adam Freeman's book的示例。 我从简单的事件处理开始，不明白为什么下面看起来很普通的handleClick()版本不能工作。使用箭头表示法(来自本书)的方法按预期工作，但我正在尝试将其转换为标准方法表示法，并且无法找出缺少的内容。 import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
cou
浏览 18提问于2019-05-02得票数 0
回答已采纳
2回答
它如何在响应js中将状态对象自动表示为参数？
reactjs、parameters、setstate
class App extends React.Component{
constructor(){
super();
this.state={
count: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState((e)=>{
return ({count: e.count + 1})
})
浏览 3提问于2021-01-26得票数 0
回答已采纳
2回答
我正在尝试用组件构建一个简单的计算器。
reactjs
我试图建立一个简单的计算器在反应使用组件。我想获取按钮的值并将其赋值为"currentItem"，但是，我仍然得到错误“无法读取属性'setState‘of null”。这是密码。代码位于两个单独的jsx文件中。我真的很感谢你的帮助。
import React from 'react';
import NumbersComponent from './NumbersComponent.jsx';
import EquationComponent from './EquationComponent.jsx';
import
浏览 2提问于2016-10-10得票数 0
回答已采纳
3回答
当道具没有改变时，为什么调用子组件的渲染？
javascript、reactjs
// Child component
class Button extends React.Component {
render() {
console.log("Render of Button called");
return (
<button onClick={this.props.handleClick}>
{this.props.children}
</button>
);
}
}
// Parent component
c
浏览 37提问于2019-06-13得票数 2
回答已采纳
2回答
SetState未定义
javascript、reactjs
可能做了件蠢事但如果有人能帮上忙。我觉得这是个未知数。因此，我试图使用setState并获得以下错误。
第20行未定义TypeError:无法读取未定义的属性“setState”
import React from 'react';
class TimeoutModal extends React.Component {
constructor(props) {
super(props);
this.state = {
timeLeft: 60,
timeoutModal: true
};
}
compo
浏览 0提问于2018-08-22得票数 2
2回答
React调用父组件中的函数以访问状态
javascript、reactjs、jsx
我试图构建一个简单的计算器应用程序来开始使用React。我试图从子组件中调用根组件中的函数，以便访问当前状态。我能够调用该函数，但无法访问状态，因为我需要更新状态。下面是我的代码：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
actions: ['=
浏览 0提问于2018-08-02得票数 0
回答已采纳
3回答
使用ES6和ES7的ReactJs中的状态
reactjs
在我看到的许多示例中，为了管理react组件中的状态，您必须使用getInitialState，如本例所示。
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? &#
浏览 2提问于2016-02-26得票数 4
回答已采纳
2回答
为什么我的联系人不能显示到我的主页？
javascript、reactjs、react-router
我正在尝试创建一个简单的联系人列表(又名rolodex)，用户可以创建一个新的联系人，并被重定向到呈现新联系人的主页。现在我在'this.setState({ contacts: this.state.contacts.concat(contact) });‘上收到'cannot read property contacts’。‘ 如有任何帮助，我们不胜感激！ App.js import React, { Component } from "react";
import ReactDOM from "react-dom";
import New
浏览 25提问于2019-12-26得票数 0
我尝试在ReactJS中切换组件的状态，但收到以下错误：
已超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我没有在我的代码中看到无限循环，有谁可以帮助我吗？
ReactJS组件代码：
import React from 'react'
import Buttonevent from './buttonevent.js'
class Button extends React.Componen
浏览 8提问于2020-08-22得票数 0
3回答
为什么我们必须绑定类组件中的方法
javascript、reactjs
在进入事件处理部分之前，我一直在阅读文档并练习React文档中的一些内容。但是我不明白为什么在类组件中使用方法时我们必须绑定函数，有人能解释一下吗？例如：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleC
浏览 9提问于2022-06-15得票数 0
1回答
Reactjs -给出误差的方法
reactjs、this
我试图显示一个组件，这取决于哪个按钮被点击，但这一行有问题。
{this.showTab({this.state.active})}
它引发一个关于语法错误的错误。我做错了什么，是否有更好的方法显示组件之一<Grids />、<Pics />或<Maths />取决于我单击的内容。
import React, {Component} from 'react';
import Pics from './pics';
import Grids from './grids';
import Maths from &#
浏览 3提问于2016-09-28得票数 2
回答已采纳
1回答
为什么我们需要为JSX回调绑定‘this
javascript、reactjs、jsx
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
浏览 2提问于2017-10-21得票数 0
3回答
在主组件中响应访问子组件的属性
reactjs
是否可以访问React中主组件中的子组件属性？
例如，我正在尝试这样做:我有一个主组件MyComponent和一个呈现按钮的SubComp子组件。是否可以将MyComponent的状态设置为单击的SubComp的tex属性
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Initial State'
};
this.handleClick = this.handleClick.b
浏览 2提问于2020-12-22得票数 1
回答已采纳
2回答
function中的事件处理:在何种情况下，我们需要对事件使用箭头函数，以及何时只需要传递类方法(函数)？
javascript、reactjs、function、events、react-hooks
示例：
1)
<button onClick="{this.handleClick}">
Click me
</button>
<button onClick={() => this.handleClick()}>
为什么我们不能直接传递一个函数？我的意思是为什么我们需要一个箭头函数。
import React, { useState } from "react";
function Example() {
const [count, setCount] = useState(0);
return (
浏览 1提问于2020-07-19得票数 0
1回答
具有两个参数的函数的Reactjs bind()
reactjs
如您所知，不建议使用bind来呈现。相反，绑定将添加到构造函数中。
class Foo extends React.Component{
constructor( props ){
super( props );
this.handleClick = this.handleClick.bind(this);
}
handleClick(event){
// your event handling logic
}
render(){
return (
<button type="button"
浏览 5提问于2021-09-16得票数 0
回答已采纳
1回答
请求解释React中的“将事件处理程序绑定到类实例”的概念
javascript、reactjs、class、binding、event-handling
嗨，我是完全堆栈web开发的新手，我试图理解React中的“将事件处理程序绑定到类实例”的概念。
class Foo extends React.Component{
constructor( props ){
super( props );
this.handleClick = this.handleClick.bind(this); // <- why?
}
handleClick(event){
// your event handling logic
}
render(){
return (
<
浏览 1提问于2020-05-10得票数 1
1回答
为什么在一种情况下没有bind()而在另一种情况下不工作呢？
javascript、reactjs
我有两个反应成分:第一：
class Clock extends React.Component {
constructor(props){
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval( () => this.tick(),1000);
}
componentWillUnmount() {
clearInterval(this.t
浏览 2提问于2022-07-24得票数 2
回答已采纳
2回答
为什么一个函数需要绑定而另一个不需要绑定？
javascript、reactjs、jsx
我刚开始学习React和JavaScript。
在阅读本教程时，我了解了一个组件的示例代码，它创建了一个切换按钮：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState
浏览 2提问于2017-01-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
