Reactjs 为什么setState方法的简单使用在componentDidMount（）方法中不起作用

出于某种该死的原因，使用

setState（）

方法对状态进行简单的更新是不起作用的，我想我已经尝试了所有的方法，比如对方法使用箭头函数，使用字典，以及在控制台登录

render（）时
的功能是加载组件的状态，由于某些该死的原因，它仍然保持不变

import React from 'react';
import { 
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
} from 'react-router-dom';

import './App.css';
import './bootstrap-5.0.0-beta3-dist/css/bootstrap.min.css';
import './bootstrap/css/overwrite.css'

import TestComponent28 from './core/DjangoIntegration';


export default class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data: [],
            is_loading: 0
        };
    }

    componentDidMount(){
        this.setState({
            is_loading: 1
        }, () => console.log(this.state));
    }

    render(){
        console.log(this.state);
        return (
            <Router>
                <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
                    <div className="container-fluid">
                        <a className="navbar-brand" href="#">Navbar</a>
                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarNav">
                            <ul className="navbar-nav">
                                <li className="nav-item">
                                    <Link to="/" className="nav-link">Home</Link>
                                </li>
                                <li className="nav-item">
                                    <Link to="/about" className="nav-link">About</Link>                                    
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>

                <Switch>
                    <Route path="/about">
                        <About/>
                    </Route>
                    <Route path="/">
                        <Home data={this.state['data']} loading={this.state['is_loading']}/>
                    </Route>
                </Switch>
            </Router>
        );
    }
}

function Home(props){
    console.log(props);
    console.log(props['loading']);
    return (
        <div className="App">
            <TestComponent28 {...props}/>
        </div>
    );
}

function About(){
    return (
        <h1>About</h1>
    );
}

从“React”导入React；
导入{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
导入“/App.css”；
导入“./bootstrap-5.0.0-beta3-dist/css/bootstrap.min.css”；
导入“./bootstrap/css/overwrite.css”
从“/core/DjangoIntegration”导入TestComponent28；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
正在加载：0
};
}
componentDidMount（）{
这是我的国家({
正在加载：1
}，（）=>console.log（this.state））；
}
render（）{
console.log（this.state）；
返回(


家


关于


);
}
}
功能主页（道具）{
控制台日志（道具）；
日志（道具['loading']）；
返回(
);
}
函数About（）{
返回(
关于
);
}

组件首次装载时
正在加载：0
。然后在安装组件后，调用
setState
函数来更新状态。因此，在更新状态后，组件将重新渲染。因此，它
console.log（）
正在加载：1
和状态的更新值。


尝试：

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
正在加载：0
};
}
componentDidMount（）{
这是我的国家(
{
正在加载：1
},
（）=>console.log（this.state.is_loading）//1
);
}
render（）{
console.log（this.state）；//{data:Array（0），is_loading:0}&{data:Array（0），is_loading:1}
返回(
至少您有一个语法问题：

    this.set State({
        is_loading: 1
    });

应该是

    this.setState({
        is_loading: 1
    });

此外，我认为你应该做一些类似的事情：

(this.state.is_loading)?
            <Router>
                <Switch>
                    <Route path="/about">
                        <About/>
                    </Route>
                    <Route path="/">
                        <Home data={this.state.data} loading={this.state.is_loading}/>
                    </Route>
                </Switch>
        </Router>
          :
                   { // Do what your program needs to do
                     // after componentDidMount is over
                   }

很抱歉，刚才删除了
set
和
State
之间的空格。由于某种原因，
console.log（this.State）；
内部
render（）
函数从
{data:Array（0），正在加载：0}
到
{data:Array（0），正在加载：1}
请参见liveyeah第一次尝试它时，状态当然是
{data:Array（0），正在加载：0}
并且当状态在
componentDidMount（）中更新时仍然是
{data:Array（0），正在加载：0}
@MigRiveraCueva您是否正在尝试在更新状态后立即对其进行控制台日志记录？很抱歉，刚刚删除了
set
和
state
之间的空格。由于某些原因，代码仍然无法正常工作。什么工作不正常？我没有看到您的代码中存在任何问题，因此我想知道是否只是对如何响应状态有误解日期起作用。你打算如何处理这个
正在加载的状态？我看不出你的代码有任何问题，请尝试共享一个正在运行的代码沙盒，或类似的，它实际上复制了你看到的问题，或者至少提供更多关于你的代码与代码片段不同之处的详细信息。请参阅。我仍然怀疑你有错误了解React状态更新的工作方式，并且没有正确解释
呈现
方法中控制台日志记录的意外副作用。
函数主（props）{console.log（props）；console.log（props['loading']）；return（…）；
由于州政府拒绝将0更新为1，我传递给组件
主页的道具仍然是0。React不会拒绝更新州政府。请尝试在您的问题中包含所有相关代码，尽量不要浪费人们的时间。您尚未演示可复制的代码示例。
(this.state.is_loading)?
            <Router>
                <Switch>
                    <Route path="/about">
                        <About/>
                    </Route>
                    <Route path="/">
                        <Home data={this.state.data} loading={this.state.is_loading}/>
                    </Route>
                </Switch>
        </Router>
          :
                   { // Do what your program needs to do
                     // after componentDidMount is over
                   }

constructor(props){
    super(props);
    this.state = {
        data: [],
        is_loading: 1
    };
}