在本机反应中更新和重新加载组件答案

【问题标题】：Update and reload component in react native在本机反应中更新和重新加载组件
【发布时间】：2021-10-26 07:10:35
【问题描述】：

单击按钮后，我正在尝试使用更新的文档刷新/重新加载页面。保存注释（）；保存对设备上文档所做的更改，并使用来自数据库中其他设备的任何其他更新来更新文档。文件路径是获取文档的 REST URL。单击同步按钮后，对文档所做的编辑将被保存，但我想重新加载页面，以便它从 onclick 按钮本身的数据库中提取最新更新的文档。

当我返回并返回此页面时，我可以看到所做的最新更改，但我希望在单击同步按钮时重新加载文档。

我尝试使用 window.location.reload(false);但它会关闭页面，因为我只想在单击同步按钮时重新加载页面或重新渲染文件路径道具以提取最新更改。

关于如何实现这一点的任何建议？

这是我的代码 sn-p

reRender = () => {
        // calling the forceUpdate() method
        this.forceUpdate();
        window.location.reload(false);
      };
render() {
return (
            <View style={{ flex: 1 }}>
                <DocumentView
                    document={filepath}
                />
                <View style={styles.button}>
                    <Button
                        onPress={() => {
                            // Save Document
                            this.saveAnnotations();
                        }}
                        title="Sync"
                    />
                </View>
                </View>
            </View>
        );
        }

【问题讨论】：

标签： react-native synchronization reload page-refresh

【解决方案1】：

要实现您要查找的内容，您需要触发render 方法。这样做将显示更新的文档。 Here 是一个显示 React 组件生命周期方法的图表。可以看到，触发render方法的三种方式：

组件接收新的道具
致电setState
致电forceUpdate

对于您的用例，我建议添加对forceUpdate 的调用，如下所示：

<View style={styles.button}>
    <Button
        onPress={() => {
            // Save Document
            this.saveAnnotations();
            this.forceUpdate(); // <-- add this
        }}
        title="Sync"
     />
</View>

【讨论】：