React Native中点击Sync按钮如何更新重载组件以拉取最新文档

问题根因 #

window.location.reload是浏览器专属API，你当前使用的是React Native环境（代码中View/onPress等组件为RN专属），调用该API会触发应用级页面重置，所以会直接关闭当前页面，不符合你的需求。

实现方案 #

React/React Native遵循状态驱动渲染逻辑，你不需要重载整个页面，只要触发DocumentView组件重新拉取文档即可，具体修改如下：

1. 利用组件状态控制DocumentView的渲染，保证同步操作完成后再触发更新
2. 不需要调用forceUpdate和window.location.reload，状态变更会自动触发组件重渲染

完整修改后的代码示例

constructor(props) {
  super(props);
  this.state = {
    // 初始化视图key，用于控制DocumentView重建
    documentViewKey: 0,
    // 也可以将filepath存在state，按需更新
    documentPath: filepath
  };
}

// 确保saveAnnotations为异步方法，能判断同步完成时机
saveAnnotations = async () => {
  // 你原有保存本地修改、拉取其他设备更新的逻辑
  // ...
  return Promise.resolve();
};

render() {
  return (
    <View style={{ flex: 1 }}>
      <DocumentView
        // 绑定key属性，key变化时React会销毁旧组件重建新组件，自动重新加载文档
        key={this.state.documentViewKey}
        document={this.state.documentPath}
      />
      <View style={styles.button}>
        <Button
          onPress={async () => {
            // 等待保存同步逻辑全部完成
            await this.saveAnnotations();
            // 更新key，触发DocumentView重建拉取最新文档
            this.setState(prev => ({
              documentViewKey: prev.documentViewKey + 1
              // 如果你用加时间戳的方式，这里更新documentPath即可：
              // documentPath: `${filepath}?t=${Date.now()}`
            }));
          }}
          title="Sync"
        />
      </View>
    </View>
  );
}

可选方案说明 #

如果你的DocumentView对相同URL有缓存，不想通过修改key的方式重建组件，可以给REST URL加无意义的时间戳查询参数，既不会影响后端接口响应，还能让组件认为是新的资源地址，强制重新拉取：
${filepath}?t=${Date.now()}

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