setState 不更新反应中的状态

Question

我正在尝试使用 React 制作一个简单的 to-do/reminder 单页应用程序。每当通过表单提交数据时，我想将组件动态添加到页面。我有一个烧瓶后端设置。这是提交表单时调用的函数：

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)

    }

后端的响应包含从数据库中提取的所有提醒。

状态刷新用于 'reload' 具有更新提醒的页面内容。我在 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 /> 组件，用于显示其中的数据。这就是我想要的行为。

问题：

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

Answer 1

可能是同步问题。 fetch 是一个异步操作。 setState 可能会在数据上传和收到服务器响应之前被调用。尝试将 setState 移到 fetch 函数的 .then 块内，以便在收到响应后调用它。然后组件可以使用新数据重新呈现。

Answer 2

您不需要刷新状态

亮点： 在状态中添加响应并使用状态来渲染卡片

试试下面的代码：

state = {
  reminders: []
}

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({
                reminders: this.response.reminders
              })
            }
          }))

{
  this.state.reminders.map((item,i=0) =>{
      return <Card key={i++} reminder={item}/>
  })
}

P.S - 不要使用 map iteration(i) 作为键，使用提醒数组中唯一标识卡片的属性。

setState 不更新反应中的状态

setState doesn't update state in react

javascript

reactjs

react-component

问题：