Question

如何在 React native 中刷新页面?

2022-01-22

33151

react-native

我的开发设备是

780496985

一旦删除评论，我想刷新我的页面。主要在这种情况下，我使用 navigation.goback（） or navigation.navigate（“同一页”）如下。

408277964 < /code>
 
  ，但问题是注释页面已有列表，其中数据从上一页获取。
在此页面上，我不能将相同的数据集（{route}）传递给注释页。
 
 
  ，因此它会刷新我的页面，但没有数据，这意味着空页面。
我不要那个。我只是将页面刷新为仅删除一个注释。
 
 
  当我在Internet上搜索时，人们推荐
  window.location.reload（）
  但是，当我使用它而不是导航时，它会给我错误，说：
 
 141250621
 
  无法反应本机使用window.location.rect.reload（）？
据我所知，它不需要任何安装或导入。
 
 
  如何使用window.location.reload（）？
否则，我可以哪种方式刷新我的页面？
 
 
 
  srimurugan sri告诉我反应无法使用窗口;）谢谢。
因此，正如他建议的那样，我尝试使用Extradata。
据我了解，它观察{data}部分上的任何更改。
如果检测到一些更改，则自动重新渲染flatlist。 148475869

，但它仍然没有刷新我的页面。您可以教我更多吗？

评论页

189103839

Answer 1

如果您想刷新 Flatlist 的数据，您可以使用 FlatList 组件上的 extraData 属性，而不必更改路由。

我们不能在 React native 中使用 window.location.reload() 。

Answer 2

不幸的是，在React Native中没有“重新加载”这样的概念。一旦“安装”路由，即使您从组件导航并回到组件。

，因此我使用以下想法从另一个浏览到另一个组件后“重新加载”该组件当我想重新加载刷新的组件

7888038952

Answer 3

由于您的数据源来自 route.params.comments 。由于您有 extraData 作为 SelectedID，因此 Flatlist 不会刷新数据。

请将您的数据置于 state 中，并将相同的 state 传递给 extraData。

import React,{useState, useEffect} from 'react';
useEffect( () => {
  const [comments, setComments] = useState(route?.params?.comments); 
  // update the comments after deleting using setComments() syntax;
},[])    
//Both data & extraData is comments
const [selectedId, setSelectedId] = useState(null);

  return (
    <Container>
      <CommentBox>
        <FlatList
          keyboardDismissMode={true}
          showsVerticalScrollIndicator={false}
          data={comments} 
          keyExtractor={(comment) => "" + comment.id}
          renderItem={renderComment}
          extraData={comments}
        />
      </CommentBox>
    </Container>
  );
  // You cannot use window.location.reload() in react native, but you can use in Web development