React中POST请求提交后如何无需手动F5刷新即可展示GET返回的最新数据

问题根因 #

• 你当前的getRandom请求仅在组件首次挂载完成的componentDidMount生命周期中执行1次，POST提交数据成功后没有主动触发重新拉取接口，所以state中存储的data不会更新，页面自然无法展示新提交的内容。手动刷新页面相当于重新触发组件挂载，才会拉取到最新数据。
• 现有代码还存在两个语法问题会影响正常渲染：
  • render方法中map遍历返回的内容包含form、div两个并列根节点，没有用外层标签包裹，React会直接报错
  • 同一个chat.id被重复作为key赋值给两个div，不符合React key值必须唯一的要求

修复方案 #

1. 调整postBack逻辑，提交成功后主动拉取最新数据 #

在POST请求确认提交成功后调用getRandom方法，拉取最新数据更新state：

postBack(e) {   
  e.preventDefault();
  const payload = {
    phone: this.state.phone,
    total: this.state.total ,
  }
  axios.post('******', payload)
  .then(res => {
    if (res.error) {
      alert(res.error); 
      return
    } 
    // 提交成功后调用拉取接口，更新本地state
    this.getRandom()
  }).catch(e => {
    console.error(e); 
  }).finally(() => this.setState({
    redirect: true // 如果你没有用redirect字段做页面跳转逻辑，可以直接删掉这行
  }));
}

2. 修复render方法的语法错误 #

render() {
    let datas = this.state.data.map(chat => {
        return (
            // 外层包React.Fragment避免多根节点报错，key值绑定到最外层元素
            <React.Fragment key={chat.id}>
                <form onSubmit={(e) => this.handleSubmit(e, chat)}> 
                  <label>
                    <input  type="text" name="name" onChange={this.handleChange} />
                  </label>
                  <button type="submit">Envoyer</button>
                </form>
                <div>
                   <p> your name is {chat.name} </p>                   
                </div>
            </React.Fragment>
        )
    })
    return (
        <div>
            {datas}
        </div>
    )
}

可选优化方案 #

如果你的POST接口会返回新增成功的那条完整数据，可以不用额外调用一次GET请求，直接把新数据追加到本地state的data数组中即可，减少一次接口请求提升性能：

// 假设POST接口返回的res.data就是新增的单条记录
.then(res => {
  if (res.error) {
    alert(res.error); 
    return
  } 
  this.setState(prevState => ({
    data: [...prevState.data, res.data]
  }))
})

内容的提问来源于stack exchange，提问作者Neff