ReactJS页面更新无自动刷新、数据始终滞后一个循环问题求助

问题根因 #

• 异步请求执行顺序不符合预期：所有AJAX请求都是异步执行的，你现有代码中「更新数据库的请求」和「查询最新列表的请求」是同时发起的，查询请求往往会先于更新请求完成，因此你拿到的永远是更新之前的旧数据，自然页面展示就会滞后一次。
• setState调用不规范：连续两次对同一个state字段赋值，且第二次赋值依赖第一次更新后的state值，而React的setState是批量异步执行的，第二次调用时拿到的this.state还是更新前的旧值。

修复方案 #

把查询最新列表的逻辑，放到「更新数据库请求完成」的回调中执行，保证是先更新完数据再查新值，同时优化setState的写法：

// 推荐用async/await写法更易读
async seqUp(contacttoassetrelationshipid) {
  // 1. 先查要更新的单条数据
  const res = await ContactAssetMasterService.getContactToAssetRelationshipById(contacttoassetrelationshipid);
  let contacttoassetrelationship = res.data;
  contacttoassetrelationship.contacttoassetRelationshipSequence += 1;
  // 2. 等待更新请求执行完成
  await ContactAssetMasterService.updateContactToAssetRelationship(contacttoassetrelationship, contacttoassetrelationshipid);
  // 3. 更新完成后再查询最新的全量列表
  const listRes = await ContactAssetMasterService.getContactToAssetRelationship();
  // 直接一次性赋值过滤后的结果，不需要两次setState
  this.setState({
    contacttoassetrelationship: listRes.data.filter(item => item.assets_assetsid === this.props.match.params.assetsid)
  });
}

如果不想用async/await，用原生Promise链式写法也可以：

seqUp(contacttoassetrelationshipid){
  ContactAssetMasterService.getContactToAssetRelationshipById(contacttoassetrelationshipid).then( (res) =>{
    let contacttoassetrelationship = res.data;
    contacttoassetrelationship.contacttoassetRelationshipSequence = contacttoassetrelationship.contacttoassetRelationshipSequence + 1;
    // 把后续查询逻辑放到update的then回调里，等更新完成再执行
    return ContactAssetMasterService.updateContactToAssetRelationship(contacttoassetrelationship, contacttoassetrelationshipid);
  }).then(() => {
    return ContactAssetMasterService.getContactToAssetRelationship()
  }).then((res) => {
    const filteredList = res.data.filter(item => item.assets_assetsid === this.props.match.params.assetsid)
    this.setState({ contacttoassetrelationship: filteredList });
  });
};

额外注意点 #

• 如果你的update接口本身会返回更新后的全量列表或者更新后的单条数据，你完全可以不用再调用一次全量查询接口，直接用接口返回的结果更新state即可，减少一次不必要的请求。
• 不要用浏览器强制刷新的方式解决这个问题，强制刷新会重置整个React应用的状态，体验很差，本质是你异步逻辑顺序错误导致的，修复后不需要手动刷新。

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