Question

我正在尝试使用 react 制作一个简单的待办事项/提醒单页应用程序。每当通过表单提交数据时，我都想向页面动态添加组件。我有一个烧瓶后端设置。这是提交表单时调用的函数：

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）。我的代码有问题吗？这是实现我想要的正确方法吗？

Answer 1

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

Answer 2

你不需要刷新状态

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

试试下面的代码：

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 - 不要使用地图迭代（i）作为键，使用提醒数组中唯一标识卡片的属性。

setState 不会在反应中更新状态

问题：

2 个答案: