Reactjs setState()没有立即改变this.state，我应该如何修复它？
在React中，setState()方法是用于更新组件状态的。然而，由于setState()是一个异步操作，所以在调用setState()后，this.state的值不会立即改变。如果需要在setState()后立即访问更新后的state值，可以通过传递一个回调函数给setState()来实现。
修复这个问题的方法是，在setState()中传递一个回调函数作为第二个参数。这个回调函数会在setState()完成并且组件重新渲染后被调用。在回调函数中，可以访问到更新后的state值。
以下是修复该问题的示例代码：
this.setState({
// 更新state的代码
}, () => {
// 在回调函数中访问更新后的state值
console.log(this.state);
});在这个示例中，setState()的第一个参数是一个对象，用于更新state的值。第二个参数是一个回调函数，用于在setState()完成后被调用。
需要注意的是，由于setState()是一个异步操作，所以在回调函数中访问到的state值可能会有延迟。如果需要在setState()完成后立即执行一些操作，可以将这些操作放在回调函数中。
对于React开发中的BUG，可以使用调试工具来帮助定位和解决问题。React开发中常用的调试工具有React Developer Tools和Chrome DevTools等。
关于React的更多信息，可以参考腾讯云的React产品介绍页面：React产品介绍
相关·内容
console.log(newState);
this.setState(newState);
this.validateFieldsAndUpdateForm(type);
console.log(this.state);
当我在执行上述操作后退出newState和this.state时，这些更改似乎还没有被保留，直到我再次对状态进行新的更改。
newState = {
contact:
firstName: “joe”
lastName: “schmoe”
}
this.state = {
contact:
firstNam
浏览 0提问于2015-07-01得票数 1
回答已采纳
在用于reactjs的setState文档中
setState()不会立即改变this.state，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。
第二个(可选)参数是一个回调函数，一旦setState完成并重新呈现该组件，将执行该回调函数。
如果我只是想更新我的状态，我会创建一个什么都不做的回调吗？
浏览 4提问于2015-09-21得票数 1
如何对状态使用shouldComponentUpdate？
我可以检查：
shouldComponentUpdate(nextProps, nextState) {
return this.state.value != nextState.value;
}
但这对州来说没有任何意义。因为如果我改变状态(this.setState({value: 'newValue'}))，this.state将等于nextState。
例如，onClick事件：
handleClick() {
this.setState({value: 'newValue'});
}
浏览 1提问于2016-10-08得票数 32
回答已采纳
我想知道this.setState是否会立即改变状态，因为它似乎并没有改变状态。
为了说明，让我们假设有一个复选框.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
switch: false
};
this.switch = this.switch.bind(this);
}
clickCoverSwitch(){
console.log("Before clicking - ", this.state.swit
浏览 3提问于2017-01-17得票数 0
回答已采纳
我似乎无法让setState更改(变异)来自方法/函数的参数或参数的值。至少，第一次打电话就不起作用了。在值更改之前，我必须调用setState两次。
import React from 'react'
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
testItem: 'originalValue'
}
}
updateState(input) {
this.setState({
浏览 8提问于2019-10-06得票数 2
回答已采纳
我有一个结果列表，其中每个结果都有以下数据: id、标题、系统、单元。该数据以对象的形式出现，例如：({id:1，标题：“主引擎”，系统："ship"，单元："C"})。
每个结果都有一个onclick，它调用一个作为状态的my addFunc函数。这个看起来是这样的：
class Search extends Component {
constructor(props) {
super(props);
this.addFunc = this.addFunc.bind(this);
this.state = { selectedDat
浏览 1提问于2020-06-19得票数 1
回答已采纳
我很难理解为什么我的组件状态在for循环中没有改变。
下面是一个例子：
class Example extends React.Component {
constructor() {
super()
this.state = {
labelCounter: 1,
}
}
componentDidMount() {
for (let i = 0; i < 10; i++) {
this.setState({ l
浏览 2提问于2017-05-05得票数 1
2回答
import React from 'react';
import ReactDOM from 'react-dom';
import {User} from './components/User';
import {DefaultGame} from './components/DefaultGame';
import {EndGame} from './components/endGame';
class Game extends React.Component {
constructor(pro
浏览 4提问于2017-08-25得票数 1
回答已采纳
2回答
我正在编写用于练习的Snake游戏应用程序。
我有一个changeDirection函数，它根据箭头单击将适当的方向设置为状态：
changeDirection = event => {
const { direction } = this.state;
const keyPressed = event.keyCode;
if (keyPressed === keyCodes.LEFT_KEY && direction !== "right") {
this.setState({ direction: "left"
浏览 1提问于2019-03-14得票数 0
1回答
我是componentDidMount()中获取数据的(我以我想要的形式获取这些数据)，我希望用this.setState.将它们保存在组件状态中。状态并没有改变。
我在控制台日志中看到了调用setState的点--有一些条件
我试过const that = this
组件没有重新呈现，状态也没有改变，我想知道原因。
我的代码：
export class Offers extends Component {
constructor(props) {
super(props);
this.renderOffer = this.renderO
浏览 1提问于2019-02-21得票数 0
我有一个登录页面，其中我使用componentWillReceiveProps路由到下一个页面。但是，我在componentWillReceiveProps中设置的componentWillReceiveProps似乎没有设置。
这是我的componentWillReceiveProps方法：
componentWillReceiveProps(nextProps) {
if (nextProps.isAuthenticated === true) {
browserHistory.push('/home');
} else {
浏览 5提问于2017-02-20得票数 11
回答已采纳
下面是赋值的初始状态
state = {
movie : null,
actors : null,
directors : [],
loading : false
}
下面是我设置的set状态，最后是set state，在设置和未设置时作为注释。我无法访问外面的this.state。
this.setState({movie:result},() => {
//then fetch the actors
浏览 7提问于2020-04-25得票数 0
回答已采纳
我是ReactJS的新手。在我的索引页面上，loginState & modalStatus的初始状态是false。我正尝试在componentDidMount()中将modalStatus更改为true。
class Home extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: true,
modalStatus: false,
};
}
componentDidMount() {
if(this.sta
浏览 2提问于2018-11-17得票数 1
是否可以使用reactJS组件的实例来呈现组件。例如，假设我的reactJS组件是
class myComponent extends Component{
constructor(props){
super(props)
this.state = {
next:false
}
this.alertSomething = this.alertSomething.bind(this);
this.showNext = this.showNext.bind(this);
}
showNext(){
console.log(&
浏览 0提问于2016-08-25得票数 0
我有一个简单的表单来设置passwordInvalid的状态。
国家最初是：
this.state = { email: '', passwordInvalid: false };
email部分很好，当我提交表单时它会更新。
更改passwordInvalid的函数是：
passwordValidator = (email) => {
this.setState(() => {
if (email === 'test') {
this.setState({ passwordInvalid: true });
浏览 2提问于2019-10-24得票数 0
我是react.js的初学者，我正在尝试实现一个简单的fizzbuzz示例。总的来说，我认为我了解了react及其组件是如何工作的，但是当我试图在codepen上运行这段代码时，我会得到以下错误：
超过最大调用堆栈大小
这是我的代码：
class App extends React.Component {
constructor(props){
super(props);
this.state = {
value : '',
number: 0
};
this.handleIncrement = this.handleIncremen
浏览 1提问于2016-11-12得票数 0
回答已采纳
componentWillMount() {
console.log(this.state);
this.setState({
...this.state,
counter: this.state.counter + 1
});
console.log(this.state);
}
render() {
return (
{this.state.counter}
);
}
输出在屏幕上很明显是1，但两个console.log都输出0。
我在用reactjs做一个小测验应用。同样的问
浏览 0提问于2018-01-05得票数 0
回答已采纳
有一个经典的句柄更改函数。我可以在同一个目录中更改数据。没有问题。但我有子数据。我不能改变他们。我想把它当作干净的，而不需要在手工中输入额外的函数。我该怎么做呢？
我的状态：
this.state = {
formData: {
appointedBroker: '',
propertyInformations: {
rent: false,
property: {
浏览 5提问于2020-09-03得票数 1
回答已采纳
我在一个环境中工作，这个环境基本上是由如下的主要组件设置的：
class MainComponent extends Component {
constructor(props) {
super(props);
this.state = {
selectedValues: []
};
}
render() {
const { selectedValues } = this.state;
return (
// Other components
<SubComponent selectedValue
浏览 0提问于2019-05-14得票数 0
我试图使用axios显示API查询的结果。在下拉选择表单中选择值后，查询将发生更改。我遇到的问题是，"current_newspaper“值似乎没有被及时更新，所以所发生的是页面在第二次单击之后刷新，而不仅仅是在我选择正确的选项之后。
例如，我单击选项"newstest2"，然后查询"getNews“正在执行查询，并使用以前的值("newstest")刷新信息。但是，在这种情况下，当我单击选项"newstest3“时，查询将使用来自"newstest2”的值完成。所以它似乎有某种延迟。我认为这个问题与状态有关，这可能是因为this
浏览 4提问于2020-05-24得票数 2
回答已采纳
如果我有一门课
class Role extends Component {
constructor(props) {
super(props);
this.state = {
role: 'something',
value: 1
}
}
render() {
let roleStatus = [];
for (let key in this.state) {
roleStatus.push(<p
浏览 6提问于2018-11-18得票数 0
我在this.state中更新对象时遇到问题。基本上我有一个带有多个范围滑块的窗体。每次更改滑块时，我都想更新this.state.dreadModel对象，但我似乎只能覆盖它。
这就是我到目前为止所尝试的：
this.setState( update ( this.state.dreadModel, { dreadModel: { [name]: e.target.value } } ), function () {
console.log(this.state);
});
我在上面的代码中得到的错误是“未捕获ReferenceError:未定义更新”。
我觉得我很接近，但是我不能很好的
浏览 10提问于2016-08-12得票数 0
回答已采纳
2回答
我想知道为什么this.setState函数在我开始键入时会给出这个错误。我同样使用箭头函数。它给出了‘无法读取属性’名称‘null’的错误。但是当我用简单的直接的方式改变状态时，它就起作用了。
这是我的代码：
class UpstreamForm extends Component {
state = {
name: '',
email: ''
}
onSubmitHandler() {
this.props.changeData(this.state)
}
chan
浏览 6提问于2020-05-14得票数 0
当父组件的状态改变时，我需要重新渲染子组件
在父组件中设置语言一旦语言改变，子组件也将用所选语言更新
Parent.js
import React, { Component } from "react";
import Child from "./Child.js";
class Parent extends Component {
constructor(props) {
super(props);
this.state ={
lblName: "Name",
lblGender:
浏览 2提问于2018-05-31得票数 3
回答已采纳
2回答
当我在做ReactJs官方教程时，我开始对不可变性的含义和应用感到困惑。
这是我所想的一个例子。假设我在一个构造函数this.state = { dog: some data}中有一个对象，然后我调用了一个设置this.setState = {dog: another data}的handleClick函数。因为我使用setState来更新值，所以旧的引用仍然是不可变的，我可以知道发生了什么变化。
但在本教程中，当他们使用.slice()复制“正方形”状态而不更改原始数组，然后应用具有新值的setState时，我感到困惑。
为什么他们需要复制数组，难道他们不能在setState中引用它并在那里
浏览 5提问于2017-05-17得票数 0
5回答
constructor(props) {
super(props);
this.state = {
active: false,
showSideBar: false,
className: ""
}
}
componentDidMount() {
if (this.props.overlay) {
this.setState({
className: "wrapper_overlay"
});
alert(this.state.
浏览 1提问于2019-01-23得票数 2
回答已采纳
我有一个JS应用程序，它用来自ASP .NET Core的条目更新引导网格表。
我需要在插入后用新的条目更新网格。我是在componentDidUpdate()的帮助下这样做的，并在那里使用了refreshList()函数，但是我得到了refreshList()函数的无穷大循环。
对于如何在没有那个循环的情况下更新网格，有什么想法吗？
import React, {Component} from 'react';
import {Table, Container} from 'react-bootstrap';
import {Button, Bu
浏览 5提问于2020-05-30得票数 0
回答已采纳
2回答
所以我使用一个API来获取一个对象数组，每个对象都有很多数据，我想过滤这些数据来获取我需要的数据，这样我就可以在React-Table上显示它了。
export default class Table extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
fetchData() {
const string = 'http://localhost:8000/issues/assigned/mike';
fetch(string
浏览 0提问于2018-05-04得票数 0
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
this.setState=this.setState.bind(this)
}
render() {
return (
<div>
<Hello name={this.state.name} />
<p>
Start editing to
浏览 0提问于2018-05-07得票数 7
我是ReactJS的新手，我正在制作简单的待办程序，我已经实现了Add，Delete，Edit functionalities.Now，我正在乱搞分页。我被困在展示部分了。
state = {
inputValue: '',
todos: [],
currentPage:1,
pageCount:1,
};
inpRef = createRef();
setPageCount = () => {
let {todos} = this.state
浏览 3提问于2020-06-11得票数 1
回答已采纳
1回答
我在reactjs中创建了一个动态表单。但我有一个恼人的问题。我只想发送表单中填写的字段。 为此，我使用这段代码，它允许我下载所有未填充的数据。在全局范围内，我的发送部分代码是 async handleSubmit(event) {
this.setState({ loading: true });
setTimeout(() => {
this.setState({ loading: false });
}, 2000);
event.preventDefault();
const {
name_contact='', name_con
浏览 17提问于2019-12-11得票数 0
回答已采纳
嗨，情况是这样的。我正在用react构建一个tictactoe游戏，我有3个组件1. GameParent 2.棋盘3. gameControls
我在GameParent组件中有一个函数，它有两个状态属性，分别称为AI和游戏，它们都是对象。我将这些对象作为道具传递给board组件。它还有一个名为startGame()的函数
startGame() {
let newAI = new AI(this.state.AIIdentity);
let newGame = new Game(newAI,this.state.AIIdentity);
this.state.AI.plays(
浏览 0提问于2017-03-08得票数 1
我正在学习react.js。我正在尝试执行基于setState的VS代码中的代码。我已经创建了一个按钮。当我点击它时，年龄值就会改变。但是按钮不起作用。你能告诉我下面代码中的错误是什么吗？ import React, { Component } from 'react'
class Pain extends Component {
constructor() {
super()
this.state = {
age: '28'
}
}
changeName(a) {
this.setState = {
浏览 25提问于2019-12-09得票数 0
回答已采纳
所以，我想找出最好的方法：
在反应中显示一个模态或隐藏一个模态。在我的主页上有很多照片，我目前的状态设置是：
export default class Main extends TrackerReact(Component) {
constructor(props) {
super(props);
this.state = {
showModal: false,
modalPhoto: {},
};
this.close = this.close.bind(this);
this.open = this.open.bind(this);
浏览 1提问于2017-04-04得票数 7
回答已采纳
我刚接触过reactjs，我试着做一个组件。我在this.state中设置了componentWillMount()，然后调用一个方法：
componentWillMount() {
this.setState({ value: this.props.value || "0" });
this.changeCbState = this.changeCbState.bind(this);
this.changeCbState();
}
但在我的方法中，changeCBState this.state是未定义的：
chang
浏览 0提问于2018-08-14得票数 2
回答已采纳
Reactjs：handleNames()函数通过Reactjs axios自动将数据作为页面加载。
我应该把每个人的名字，当我点击邮政名称按钮。
但在这里
handleNames()函数似乎会通过axios自动将数据作为页面加载。
当我检查我的控制台时，我可以看到每秒钟超过3000个请求/调用自动通过handleNames()向axio发出，而不需要单击Post名称按钮。
请对此提供任何解决方案，因为我只想在单击post名称按钮时将其发布到axios
import React, { Component, Fragment } from "react";
import { re
浏览 1提问于2018-12-16得票数 0
回答已采纳
我对JS的反应是新的。我有多个IconButtons。OnClick我只想要点击按钮来改变它的颜色。我使用了状态，但是当状态发生变化时，所有按钮的颜色都会发生变化。我应该采用什么方法？有没有一种不使用状态来改变颜色的方法？需要钥匙还是身份证？我提供的代码是裁剪的(意味着它只包含我认为相关的部分)。
class Utilitybar extends React.Component {
constructor(props) {
super(props);
this.state = {
bgColor: "default"
};
}
r
浏览 0提问于2019-07-19得票数 1
回答已采纳
根据中的解释
setState()不会立即改变this.state，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。
对setState的调用不能保证同步操作，为了提高性能，调用可以批处理。
因此，由于setState()是异步的，并且不能保证其同步性能。是否有一个setState()的替代方案是同步的。
例如
//initial value of cnt:0
this.setState({cnt:this.state.cnt+1})
alert(this.state.cnt); //alert value:0
由于alert值是以前的值，所以使
浏览 6提问于2017-02-03得票数 92
回答已采纳
2回答
根据输入是否有效，我有一个使用className="error"或classname=""呈现的组件。这样，在CSS中，我可以简单地做.error { background: red; }。输入的有效性由isValidNumber(..)函数决定。然而，现在我遇到的问题是，验证太快了。如果输入无效，它几乎立即用"error“类名呈现，这是一个恼人的UX问题。我希望有一些延迟，以避免类是“错误”，所以立即，也许0.5秒将是好的。
。对于诸如“23亿”、“一万亿”或"203239123“之类的东西，输入是有效的，而不是"2绵羊”或“山”。
到
浏览 9提问于2015-06-19得票数 1
回答已采纳
1回答
我试图用handleClick()函数实现3件事。将buttonText切换为FOLLOW或follow，切换“active”类并处理跟随操作。我可能做得不对。由于某些原因，onClick事件对此没有任何影响。有什么想法吗？谢谢
class FollowButton extends React.Component {
constructor() {
super();
this.state = {};
this.state.following_state = true;
}
handleClick(event) {
event.preventD
浏览 1提问于2015-09-25得票数 1
1回答
我的朋友们，我正在制作一个react类，它在表单提交时获得一个输入值，使用axios发送get请求，但是在第二次单击之后，我得到了结果
class SearchForm extends React.Component{
constructor(props) {
super(props);
this.state = {inputtermvalue: "",spaces_list: "",spacesname: ""};
}
componentDidMount() {
}
updateInputValue(evt)
浏览 0提问于2018-03-19得票数 0
回答已采纳
我已经开始学习ReactJS，并意识到有两种方法可以改变状态。两者都正常工作，没有任何错误或警告。
主要的区别是什么？我是否有理由或需要使用第二版？
考虑修改以下状态，每次单击
this.state = { count: 0 }
第一版
handleClick = () => {
this.setState({count: this.state.count+1})
}
第二版
handleClick = () => {
this.setState(prvState => {
return {
count: pr
浏览 0提问于2019-01-20得票数 2
回答已采纳
1回答
我对setState的调用在then of a fetch中什么也没有做。
该类的声明如下：
export default class QuestionHolder extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {
completed: false,
revealAnswer: false,
selectedAlternative: undefin
浏览 3提问于2022-05-02得票数 0
回答已采纳
我正在尝试理解如何在ReactJS中将更改的状态从子组件传递到其父组件？到目前为止，下面的代码改变了孩子的状态，但没有改变父母的状态，你知道我做错了什么吗？
我正在使用redux从mongodb获取产品阵列。
产品数组示例：
[
{
“_id”: “2331”,
“department”: “Shoes”,
“category”: “Shoes/Women/Pumps”,
“name”: “Calvin Klein”,
“title”: “Evening Platform Pumps”,
浏览 5提问于2018-09-06得票数 0
我需要加载一个包含26731个元素的JSON文件，然后获取长度，然后生成一个随机元素并使用代码中的值。但是这个异步Reactjs让我抓狂，我花了很长时间去找一些简单的东西来同步。
问题是，尽管我可以将JSON加载到字典：[]，但我不能使用它来生成随机数的长度。
我尝试了扩展操作符...this.state，但它似乎不合适，也没有什么区别。
我国
this.state = {
dictionary: [],
isLoaded: false,
dictLength: 0,
rnd: 0
};
componentDidMount() {
this.loadUpDictionar
浏览 8提问于2019-11-11得票数 1
回答已采纳
我正在编写一个reactjs聊天客户端，并在文档中看到了。
永远不要直接变异this.state，因为调用setState()之后可能会替换您所做的突变。对待this.state就好像它是不可变的。
setState()不会立即改变this.state，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。
对setState的调用不能保证同步操作，为了提高性能，调用可以批处理。
除非在setState()中实现了条件呈现逻辑，否则shouldComponentUpdate()总是会触发重呈现。如果正在使用可变对象，并且不能在shouldComponentUpda
浏览 2提问于2016-06-14得票数 2
回答已采纳
如何使状态和数组一致工作？
结果是如此混乱和不一致。
这是一项声明：
this.state = {
tutorSubjects: [],
};
这是设置状态；第一个console.log将主题记录在数组中，第二个日志和空数组：
const name = target.name;
if (name === "tutorSubjects") {
let subjects = this.state.tutorSubjects.concat(value);
浏览 2提问于2020-08-17得票数 2
3回答
我正在尝试部分更改组件的状态，但不幸的是，它没有执行，因为我正在进行操作。
我以这种方式初始化状态：
constructor(props){
super(props);
this.state = {
array: [],
status: false,
interval: null,
animations: [],
algorithm: null
}
}
我试着用它的方式
if(this.state.status ===
浏览 4提问于2020-06-07得票数 1
回答已采纳
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
var mode=[ 'recent', 'alltime'];
class Header extends React.Component {
constructor(){
super()
}
render(){
return <h2>Free Code Camp Leader boar
浏览 2提问于2016-08-23得票数 1
回答已采纳
1回答
在我尝试用不同的方式、名称和价值改变道具之前，我从未遇到过这种情况，我甚至尝试为每个按钮创建一个方法。问题是，按钮并不总是做自己想做的事情，有时会增加“会话”或减少“中断”，反之亦然。
const breakdown="breakdown"
const breakup="breakup"
const sessionup="sessionup"
const sessiondown="sessiondown"
class Clock extends React.Component{
constructor(){
s
浏览 1提问于2020-07-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
