此问题已在此处找到答案：

setstate不会立即更新状态（14个答案）
五小时前关门了。
我正在尝试使用react制作一个简单的待办事项/提醒单页应用程序。每当通过表单提交数据时，我想动态地向页面添加组件。我有一个 flask 后端设置。这是提交表单时调用的函数：

submitNewReminder(event){
        event.preventDefault()
        let form = document.getElementById('new-reminder-form')
        const data = new FormData(form)
        const plainFormData = Object.fromEntries(data.entries());
        const JSONdata = JSON.stringify(plainFormData)

        fetch('http://localhost:5000/addrem',{
            method: 'POST',
            headers:{'Content-Type': 'application/json'},
            body: JSONdata,
        }).then(resp => resp.json().then(data =>{
                if (data){
                    this.response = data
                }
            }))

        this.setState({refresh:(this.state.refresh?0:1)})
        console.log(this.state.refresh)

    }

来自后端的响应包含从数据库提取的所有提醒。
状态刷新用于使用更新的提醒“重新加载”页面内容。我将其在1和0之间切换，以便状态得到更新，并且可以在每次添加提醒时使用添加的数据重新呈现组件。渲染方法如下所示：

render(){
        if (!this.state.isLoggedin && (this.state.refresh === 1 || this.state.refresh === 1)){
            return(
                <div>
                    <LoginForm do={this.submitForm} toggleSignup={this.toggleSignup}/>
                </div>
            )
        }
        else{
            return(
                <div className='container text-center'>
                    <h1>Logged in!</h1>
                    <div className="row">
                        { this.response.reminders.map((item,i=0) =>{
                                return <Card key={i++} reminder={item}/>
                            }
                        )}
                        <AddReminder addRem={this.toggleAddReminder} cancel={this.cancelAdd} submit={this.submitNewReminder}/>
                    </div>
                </div>
            )
        }
    }

添加每个提醒后，新的 <Card /> 将创建显示其中数据的组件。这就是我想要的行为。

问题是：

首次提交表格时，不会产生新卡片/提醒。但对于后续提交，每次都会显示一张新卡。我无法理解这种行为。这个 console.log(this.state.refresh) 显示第一次提交时 refresh 保留1（刷新用值1初始化）。我的代码有问题吗？这是实现我想要的目标的正确方法吗？