setState 在 componentDidMount() 中不起作用

Question

对于发布重复的问题，我深表歉意，但在阅读了所有以前的答案后，我无法让我的代码正常工作。

在我的代码中，我尝试使用 queryString 读取 URL 参数并使用 setState() 更新状态。全部在 componentDidMount() 方法中。

import React, {Component} from 'react';
import ChartBox from "./chartBox";
import Header from "./header";
import Footer from "./footer";
import Greeting from "./greeting";
import Menu from "./menu";
import Navbar from "./navbar";
import queryString from "query-string";



class Body extends Component{
    constructor(props){
        super(props);
        this.state = {
            username:""
        };
    }


    componentDidMount(){
        let user = queryString.parse(this.props.location.search);
        this.setState({username: user});

        console.log(this.state.username);
        console.log(user.user);
    }

    render(){
        return(
       <div>
           <Header />
           <Navbar />
           <Greeting user = {this.state.username}/>
           <ChartBox user = {this.state.username}/>
           <Menu user = {this.state.username}/>
           <Footer />
       </div>
        )
    }
}

export default Body;

queryString 工作正常，并为user 变量获取正确的值。 this.setState({username: user}); 不更新状态 - 我不明白为什么。 即使我将初始状态显式设置为某个值，{this.state.username} 也不会将undefined 传递给子组件。

我看到有人提到这可能是范围问题，但另一方面，我在互联网上看到的示例与我的没有什么不同。我现在完全糊涂了。

非常感谢任何帮助。

Answer 1

setState() 不保证是同步的。 this.state.username 将在 componentDidMount() 返回后一段时间更新

Answer 2

setState 是异步的。

这意味着您不能在一行调用setState 并假设下一行的状态已更改。

setState({ name: "Michael" });
console.log(this.state.name);  //it won't show current updated state

如何检查？

setState({ name: "Michael" },()=>{
  console.log(this.state.name);
});

在这里您可以通过回调检查您的状态是否更新。

演示https://codesandbox.io/s/asynchronous-fc9zx