当调用setState时，我的React状态不会更新
当调用setState时，React状态不会更新的原因可能有以下几种：
- 异步更新：React中的setState方法是异步执行的，即使调用了setState，状态的更新不会立即生效。React会将多个setState调用合并为一个更新操作，以提高性能。因此，如果在调用setState后立即访问状态，可能会得到旧的状态值。
解决方法：可以使用回调函数或者在生命周期方法中访问更新后的状态值。例如，可以在setState的第二个参数中传入一个回调函数，在回调函数中访问更新后的状态值。
- 同步更新但未触发重新渲染：在某些情况下，即使状态已经更新，React可能不会触发重新渲染组件。这可能是因为React认为更新后的状态与当前状态相同，因此不需要重新渲染。
解决方法：可以通过在setState中传入一个新的对象或者使用函数形式的setState来确保状态的更新。例如，可以使用spread操作符创建一个新的状态对象，或者使用函数形式的setState来基于当前状态进行更新。
- 错误的使用方式：在调用setState时，可能会出现一些错误的使用方式，导致状态不会更新。例如，直接修改状态对象而不是使用setState方法，或者在不合适的地方调用setState。
解决方法：确保正确使用setState方法，遵循React的更新状态的规范。不要直接修改状态对象，而是使用setState方法来更新状态。
总结起来，当调用setState时，React状态不会更新可能是因为异步更新、同步更新但未触发重新渲染，或者错误的使用方式。为了解决这个问题，可以使用回调函数或生命周期方法来访问更新后的状态值，确保正确使用setState方法，并使用新的对象或函数形式的setState来更新状态。
相关·内容
为什么“初始结果”和“最终结果”在控制台中是相同的，尽管html中的state.result是不同的和正确的？我搞错了吗？我希望有一个文本输入，以更新结果时，您键入。另外，当你删除一封带有退格的信件时，它不会更新。
我在控制台中打印了值，但这是因为值是过去的，而不是当前的。
import React from 'react';
export default class TQValueCalculator extends React.Component {
constructor(props) {
super(props);
this.state = ({re
浏览 0提问于2019-01-23得票数 1
回答已采纳
为了将子组件的状态传递给父组件的状态，我有一个回调函数。
当加载所有子组件时，我希望它们执行回调函数并填充父组件的状态。
尽管似乎只有最后一个组件将其状态传递给父组件。
我的孩子部分：
import React, { useState, useEffect } from "react";
export default function Component(props) {
const [state, setState] = useState(0);
useEffect(() => {
var index = props.index;
var
浏览 5提问于2020-02-04得票数 1
回答已采纳
4回答
如果我想根据当前状态更新状态，我想知道使用哪种形式的setState。
React的setState以对象或函数作为参数。据我所知，下面的操作不像预期的那样工作，因为React批处理setState
state = {score : 0};
increaseScoreBy2 () {
this.setState({score : this.state.score + 1});
this.setState({score : this.state.score + 1});
}
更好的方法是
increaseScoreBy2 () {
this.setState(prevState =>
浏览 0提问于2018-07-31得票数 5
回答已采纳
每次调用setState()时是否重新呈现所有组件和子组件？
如果是，为什么？我认为，当时的想法是，只有在状态发生变化时，才能做出尽可能少的反应。
在下面的简单示例中，两个类在单击文本时都会再次呈现，尽管在随后的单击中状态不会改变，因为onClick处理程序总是将state设置为相同的值：
this.setState({'test':'me'});
我原以为只有当state数据发生更改时，才会出现呈现。
下面是示例和嵌入式代码段的代码：
var TimeInChild = React.createClass({
render: function()
浏览 17提问于2014-07-13得票数 641
回答已采纳
4回答
在下面的示例中，我使用一个ES6映射作为React中的状态值：
class App extends React.Component {
constructor(props) {
super(props);
const results = new Map();
results["group1"] = [{ value: "..." }, { value: "..." }];
this.state = { results };
}
onUpdateClick(i) {
this.state.r
浏览 8提问于2020-06-19得票数 3
3回答
在这里，数组(布尔值)：
const [state, setState] = React.useState({
[`${"checkedA"+index}`]: false, //checkedA0
[`${"checkedB"+index}`]: false, //checkedB0
[`${"checkedC"+index}`]: false, //checkedC0
[`${"checkedD"+index}`]: false, //checkeD0
});
问题代码是：
c
浏览 2提问于2020-05-07得票数 0
我使用React来呈现输入的type=“文本”。我知道，如果使用value属性，React将呈现只读文本框。因此，我自己编写了一个小组件(见下文)。
React.createClass({
getInitialState: function() {
var self = this;
return {value: self.renderDefault(self.props.value, '')};
},
handleOnChange: function(event) {
this.setState({valu
浏览 4提问于2015-05-08得票数 3
回答已采纳
1回答
在react中，我看到了源代码中的三个事务。我想知道他们是怎么工作的。
ReactDefaultBatchingStrategyTransaction
ReactUpdatesFlushTransaction
ReactReconcileTransaction
在阅读完之后，在我看来，在一个调用setState的单击事件处理程序中，它似乎使用了所有三种方法。下面是一个例子。
在childComp中，clickHandler调用子对象本身的setState，然后调用父级的handler，后者在父级上调用setState。
我的问题是在上面的行动，为什么反应使用三次交易？在我看来，只有一个事务
浏览 1提问于2018-01-08得票数 1
回答已采纳
我的react应用程序中有下一个组件：
import React, { useEffect, useState } from "react";
import AsyncSelect from "react-select/async";
import { ColourOption, colourOptions } from "./docs/data";
const App = () => {
const [state, setState] = useState([]);
useEffect(() => {
set
浏览 9提问于2021-12-14得票数 0
伙计们，我试着用裁判给this.setState里面的他，但它给：
超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我做得如何：
ref = {
(anchor) => this.setState({
anchor
})
} >
但当我用：
ref = {
(anchor) => this.state.anchor = anchor
} >
起作用了..。
在
浏览 1提问于2018-08-31得票数 5
回答已采纳
2回答
我使用下面的方法从其他组件控制我的头文件。然而，当更改页面时，我得到了旧的"can't perform a react state on unmounted“错误 export const store = {
state: {},
setState(value) {
this.state = value;
this.setters.forEach(setter => setter(this.state));
},
setters: []
};
store.setState = store.setState.
浏览 36提问于2019-06-27得票数 1
回答已采纳
3回答
class Dashboard extends React.Component{
constructor(props){
super(props);
this.state = {navigation : ''}
}
render(){
return(
<div className="wrapper">
<Navigation onNavigationChange={this.onNavigationChange
浏览 8提问于2016-06-16得票数 0
回答已采纳
在中，它说"React可以批处理多个setState()调用到单个更新中以提高性能“，因此建议使用函数而不是setState参数的对象。这如何解决问题？
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
浏览 5提问于2016-11-08得票数 9
回答已采纳
当我用后增量运算符更改变量状态时，count变量使用旧值.
让我以这个应用程序为例来解释：
当我使用以下代码按下按钮时，应用程序将向我展示这个系列：
0 - 0 - 1 - 1 - 2 - 2 - 3 - 3 - 4 - 4 - 5 - 5 ...
但是在数学逻辑中，它应该展示这个系列：
0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 ...
守则：
import React, { useState } from 'react';
import { Button, SafeAreaView, Text, View, } from
浏览 2提问于2021-07-05得票数 1
回答已采纳
一旦this.setState()被调用，React组件是否会对其state进行一些检查，以查看state是否已更改。因此，在调用componentDidMount之后，将不再有一个协调阶段，如下面的代码所示：
// in constructor
this.state = {width: 0}
...
// in componentDidMount method
this.setState(() => ({ width: 0 }))
或者我需要手动执行这些检查，例如：
const width = getViewportWidth()
if (this.state.width !== wi
浏览 1提问于2018-01-05得票数 2
在使用componentWillReceiveProps从redux获取数据后更新组件本地对象之前。
componentWillReceiveProps(nextProps) {
if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
this.setState({user:{
name:nextProps.editUser.name,
email:nextProp
浏览 0提问于2019-02-21得票数 2
React文档显示了关于的以下内容
If you need to set the state based on the previous state, read about the updater argument below，
下面这句话我不明白：
如果正在使用可变对象，并且不能在shouldComponentUpdate()，中实现条件呈现逻辑，则只有当新状态与以前的状态不同时，才能调用setState()，这将避免不必要的重新呈现。
他们说：
第一个参数是带有签名( state，props)的更新器函数.状态是在应用更改时对组件状态的引用。
并举一个例子：
this.se
浏览 0提问于2019-07-11得票数 4
回答已采纳
假设我有以下使用react钩子的组件
const Component = (props) => {
[state1, setState1] = useState();
[state2, setState2] = useState();
useEffect(()=>{
// use state1 and state2 as param to fetch data
...
}, [state1, state2])
onSomethingChange = () => {
setState1(...);
浏览 17提问于2020-02-20得票数 2
回答已采纳
1回答
在本例中，当我试图在componentDidUpdate生命周期回调期间更新状态时，我会得到一个too much recursion错误。我应该如何更新状态？
import React from 'react';
class NotesContainer extends React.Component {
constructor(props) {
super(props);
this.state = { listOfShoppingItems: [] };
}
componentDidUpdate(nextProps, nextState) {
浏览 0提问于2015-08-25得票数 5
回答已采纳
在使用React时，我理解它，因此在组件的render方法中调用setState是错误的做法；相反，请保持此方法的纯正性。但是，如果我需要基于链接到组件的事件来更新状态，我如何做到这一点？
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.handleCl
浏览 0提问于2018-07-24得票数 2
回答已采纳
我似乎无法让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
回答已采纳
我使用带有回调的setState来确保状态更新后运行。
...
this.setState({enabled : true},this.getData);
}
getData () {
const self = this;
fetch(this.props.url,{
method : 'post',
body : this.state
}).then(function (response) {
return response.json();
}).then(function (result
浏览 8提问于2018-01-07得票数 4
回答已采纳
在这个reactjs文档中，关于自定义钩子的例子
import React, { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscr
浏览 1提问于2019-12-05得票数 1
回答已采纳
1回答
当道具发生变化时，我如何强制react组件更新状态？
我一直在使用这种方法：
componentWillReceiveProps(nextProps){
this.setState({key:nextProps});
console.log(this.state);
}
控制台向我显示nextProps是已定义的值，但this.state.key仍未定义。
谢谢!
浏览 1提问于2018-06-13得票数 0
回答已采纳
当我向输入字段提交一个值时，它应该将值推入数组中，因为它很好地记录了输入值，但是它没有更新状态下的列表数组(this.state.list)。它第一次工作，就像安莉在网页上显示的那样，但是这个值没有显示在控制台中。然而，当我按两次enter时，它还是有效的。
import React from 'react';
class App extends React.Component{
constructor(props){
super(props )
this.state = {
input: "",
浏览 7提问于2020-04-02得票数 1
回答已采纳
我想检查一下当你多次使用this.setState时会发生什么(为了讨论起见，使用了2次)。我以为组件会被渲染两次，但显然它只渲染了一次。我的另一个期望是，也许对setState的第二个调用会超过第一个调用，但你猜对了-工作得很好。
链接到
var Hello = React.createClass({
render: function() {
return (
<div>
<div>Hello {this.props.name}</div>
<CheckBox />
</
浏览 0提问于2015-11-10得票数 124
回答已采纳
import React, { Component } from "react";
import LogIn from "./LogIn.js"
import User from "./components/User.js"
class App extends Component {
constructor(props) {
super(props);
this.state = {
projectList: [],
myProjects: [],
浏览 21提问于2020-05-31得票数 0
回答已采纳
2回答
我知道围绕这个问题也有类似的问题，但我无法使用这些答案来使我的代码正常工作。 我想在每次单击按钮时将nextPage的状态递增1。 我已经尝试删除handleClick方法中的返回值。我还尝试添加一个变量来保存更新后的num，并将其作为state的值传递，如下所示 handleClick = (num) => {
let x = num++
return this.setState({
nextPage: x
})
} 我尝试的东西似乎都没有更新状态。下面是我当前的代码： import React, { Component
浏览 26提问于2019-10-06得票数 0
回答已采纳
1回答
这是我的组件-结构: ExchangeRateInput ExhangeRateValueInput ExhangeRateDialog
打开的状态作为支柱传递给ExhangeRateDialog。但是当我在setState中打开ExchangeRateInput时，它似乎在ExhangeRateDialog中没有变化。有人能解释一下我做错了什么吗。
ExchangeRateInput
import { composeWithTracker, composeAll } from 'react-komposer';
import React from 'react'
浏览 2提问于2016-10-21得票数 0
回答已采纳
3回答
我只是在学习React，我正在做教程：
在它中，我们应该创建一个函数来计算抽搐的胜利者，然后我们把方块内容的列表传递给它。每次单击正方形时，我都会更新此列表。但是，我注意到，当我使用this.setState设置我的Board对象的平方列表，然后尝试将它与this.state.squares放在一起时，我不会得到活动状态，而是前一个状态。
就像我在第一个正方形中添加一个X，在下一个移动时它将在this.state.squares中。
下面是代码，我使用：
handleClick(square){
let squares = this.state.squares.slice();
浏览 0提问于2018-12-23得票数 3
回答已采纳
我试图将子数据保存在父级的状态中，但是由于setState()调用了render()，所以最终得到了无穷无尽的循环。
错误消息：最大更新深度exceeded.This可能发生在组件在componentWillUpdate或componentDidUpdate中反复调用setState时。React限制嵌套更新的数量，以防止无限循环。
相对较新的反应，所以我似乎不能在谷歌搜索解决方案时说出这个问题。我知道为什么会出现错误，我只是不知道如何绕过这个问题。是否有一种特定的方法可以防止重呈现？
以下是家长：
export class ToDoList extends React.Component {
浏览 0提问于2018-06-13得票数 2
我理解，在中，React教程和文档警告说，状态不应该直接变异，一切都应该通过setState。
我想知道为什么我不能直接改变状态，然后(在同一个函数中)调用this.setState({})来触发render。
下面的代码似乎运行得很好：
const React = require('react');
const App = React.createClass({
getInitialState: function() {
return {
some: {
rather: {
deeply: {
浏览 10提问于2016-06-10得票数 132
回答已采纳
4回答
我有下面的代码-
class Sum extends React.Component {
constructor(props) {
super(props)
this.state = { a : 0 }
}
// let's call this ADD-1
add = () => {
this.setState({ a: this.state.a + 1 })
this.setState({ a: this.state.a + 2 })
this.setState({ a: this.s
浏览 0提问于2018-06-29得票数 1
回答已采纳
所以我有这个组件：
import React from 'react';
import PropTypes from 'prop-types';
import { isEqual } from 'lodash';
class SomeComponent extends React.Component {
static propTypes = {
onChange: PropTypes.func,
};
previousItems = [];
constructor(props) {
super(props);
浏览 4提问于2018-05-08得票数 3
我记得当我发现setState是异步的时，我是多么的惊讶。现在，我偶然发现了一种“奇怪”的行为，它不适合我对setState异步性的理解。
考虑下面的代码片段(由于某种原因，它会导致Script Error，下面是外部沙箱：)：
class SomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
prop1: 1,
prop2: 2
};
setTimeout(this.changeProp1.bind(t
浏览 1提问于2018-08-26得票数 3
回答已采纳
也将合并钩子的状态更新，就像对setState一样。
state={count:0}
increment = () => {
this.setState({count: this.state.count+1})
this.setState({count: this.state.count+2})
}
在类组件中，最后一个setState操作将被执行到consideration.Since中--状态更新是。
当您调用setState()时，React将您提供的对象合并到当前的state.The中，合并很浅。
Object.assig
浏览 6提问于2022-01-23得票数 1
回答已采纳
我有父组件，我在那里进行API调用，并为一个对象设置状态。然后我将这个状态作为道具传递给孩子。这是我的父母代码，
class Header extends React.Component {
constructor(props) {
super(props);
this.state = { user: null};
}//end of constructor
componentWillMount() {
getUserData(url).then((result) =>{
this.setState({user : result})
浏览 1提问于2016-11-14得票数 0
2回答
我通常在react中更新状态以切换react中的图标显示：
toggle = () => {
this.setState({
open: !this.state.open
}) // setState
} // toggle callback
现在，我看到了一种新的方法，这是推荐的方式，而不是上面的方式：
toggle = () => {
this.setState((prevState, props) => {
return {
open: !prevState.open
} //
浏览 0提问于2017-09-07得票数 0
回答已采纳
6回答
我是React.js的新手，我正在努力理解React生命周期方法中的几种方法。
到目前为止，我有些事情让我感到困惑：
1)
据我所知，componentWillUpdate和componentWillReceiveProps之间的区别是，当父程序更改道具时将调用componentWillReceiveProps，我们可以使用setState (componentWillReceiveProps中的这个子程序的setState)。
例如：
var App = React.createClass({
getInitialState: function() {
return {sourc
浏览 6提问于2015-04-26得票数 62
回答已采纳
1回答
我开始使用React中的上下文api，并决定创建一个简单的主题上下文。现在，如果我转到我的React DevTools并将boolean isLightTheme更改为false，它可以工作，但当我尝试将此功能附加到按钮时，我总是收到错误。有人能帮我吗？ 主题上下文 import React, { useState, createContext } from 'react'
export const ThemeContext = createContext()
export const ThemeContextProvider = ({ children }) =>
浏览 19提问于2020-06-15得票数 1
回答已采纳
我是个新手，我正在尝试使用一个函数来修复日期的输入。基本上，如果日期丢失，我会将其默认为'9999-12-31‘，以便PHP后端更容易将其插入数据库中。保存表单时，它调用validateInputs函数，该函数更正丢失的日期，然后调用onSave函数。如果我这样做：
validateInputs: function(e) {
if (!this.state.expire_date || this.state.expire_date == '') {
this.setState({ expire_date: '999
浏览 0提问于2020-02-12得票数 0
我知道已经有类似的问题了，但是里面没有代码共享。
在navbarChanged() > if条件下，我正在执行一个this.setState。这是HomeTab类型，但setState似乎不起作用。
有什么线索/提示吗？
class HomeTab extends React.Component {
constructor() {
super()
this.setState({
isNavBarHidden: false
});
}
updatePosition(lastPosition) {
}
navbarChanged(
浏览 94提问于2015-06-16得票数 28
回答已采纳
我有一个文本输入搜索栏来查找产品，当我输入产品时，它会发出一个AJAX请求来查找匹配项，并将其设置为products状态。然而，它落后于一个字符。即输入"car“，它搜索"ca"，当我键入"car”时，它用“car”搜索。我猜这与setState的反应有关。关于如何解决这个问题的提示？
class ProductIndexPage extends React.Component {
constructor(props) {
super(props);
this.state = {
term: '',
c
浏览 2提问于2017-09-03得票数 2
回答已采纳
2回答
const Greeting = () => {
console.log("Greeting is called");
return <h2> Hello World </h2>;
}
class Counter extends React.Component{
constructor(props){
console.log("Counter is called");
super(props);
this.state = {
coun
浏览 1提问于2018-08-23得票数 1
回答已采纳
希望你们身体健康。我正在学习“反应”，并遵循一个教程：时间也是在YouTube视频中提到的，我被困在了那里。这是我的守则：
这是ToDoComponent
import React from 'react';
function ToDoItem(props){
return(
<div className="tasks">
<label>{props.item.taskName}</label><input type="checkbox"
浏览 3提问于2020-07-04得票数 0
回答已采纳
我已经创建了一个在运行时创建和构建组件树的函数。基于来自tree服务的一些参数，这个树每次都是不同的。我能够成功地呈现树，但是状态值不会在状态改变时更新。
例如：
export default class App extends React.Component {
state={
loading:true,
}
componentDidMount() {
this.buildComponent();
}
buildComponent() {
var comp = <View style={{flex:1,justifyContent:&#
浏览 8提问于2020-02-21得票数 0
3回答
无法为第一次单击保存状态
、、、
我正在构建一个react组件，用户可以在其中进行选择，一旦用户在选择后点击保存，我就会将选项保存在状态中。但是，在第一次单击保存(在模式内)之后，它不会被保存。一旦我关闭模式，并再次打开，那么最后选择的选项将被保存。
Sample.js
import React, { Component } from "react";
import Modal from "./Modal";
class Sample extends Component {
constructor(props) {
super(props);
this.state = {
浏览 0提问于2019-11-06得票数 0
回答已采纳
我想知道是否有可能在一个事件中多次更新状态。假设我有一个表单，其中可能需要使用多个inputs来更新单个状态，其逻辑类似于下面的示例： 在父组件中定义的状态： import React, { useState } from "react";
function ParentComponent() {
const [state, setState] = useState([]);
return (
<ChildComponent state={state} setState={setState} />
)};
export defau
浏览 48提问于2020-04-08得票数 1
回答已采纳
我刚接触react和react原生，并试图了解React组件的生命周期……我的屏幕上有四个开关。我尝试将开关的当前状态保存为对象(应用的过滤器)，然后将其传递给导航道具的参数，并在导航标题中保存按钮的onPress函数中访问它。 import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, StyleSheet, Switch } from 'react-native';
import { HeaderButtons, Item } from '
浏览 79提问于2020-10-20得票数 0
2回答
我正在尝试制作一个搜索函数，该函数呈现在搜索文本输入中匹配的人员的姓名。
问题是，我将状态设置为与搜索匹配的项，然后初始状态将丢失，因此无法进行更多搜索，因为状态将为空。那么，我该如何“填满”状态呢？
或者，可能还有其他方法，而不需要实际设置我不知道的状态。
我试图修复这个问题，尝试在过滤器之前调用handleSearch函数时将其重置为初始状态，但这不起作用。
import React from 'react';
import Header from './Header';
import peopleData from '../persons.json
浏览 17提问于2017-06-23得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
