reactjs - 如何在每次用户打开屏幕时获取数据并仅在获取的数据与状态中的当前数据不同时才更新状态

Question

我对 React、React Native 和 Redux 比较陌生，我有一个关于从 API 获取数据和更新状态的问题。

我想做的是:- 每次用户打开屏幕(即帖子)时，我想从 api 获取数据并更新状态。

这样:- 我总是有新获取的数据处于状态并呈现在屏幕上。

如果我只在 componentDidMount 生命周期方法中获取数据，那么我不会总是有新数据。

例子:有两个屏幕 Post 和 Posts。如果用户第一次打开帖子屏幕，则会触发 componentDidMount 并获取和呈现帖子。然后他转到 Post 屏幕添加一个新帖子并返回 Posts 屏幕然后他将看不到该新帖子，因为帖子将从 componentDidMount 方法中获取的状态显示。

处理此问题并始终拥有最新数据的最佳方法是什么？

class Posts extends Component {
    componentDidMount() {
        this.props.fetchPosts();
    }

    componentDidUpdate(prevProps) {
        this.props.fetchPosts();
    }

    render () { ... }
}

const mapStateToProps = state => {
    return {
        posts: state.posts.posts,
        loading: state.posts.loading,
    }
}

const mapDispatchToProps = dispatch => {
     return {
         fetchPosts: () => dispatch(actions.fetchPosts()),
     }
}

export default connect(mapStateToProps, mapDispatchToProps)(Posts)

---

Action

export const fetchPosts = () => {
    return dispatch => {

         dispatch(fetchStarted());

         apiFetchPosts()
         .then(({data}) => {

             const posts = data.data;

             dispatch(fetched(posts))
         })
         .catch(error => {
             dispatch(fetchFailed(error));
         })
     }
 }

 const fetchStarted = () => {
      return {
         type: actionTypes.POSTS_FETCH_START,
      }
 }

 const fetched = (posts) => {
      return {
           type: actionTypes.POSTS_FETCH_SUCCESS,
           posts,
      }
 }

 const fetchFailed = (error) => {
     return {
         type: actionTypes.POSTS_FETCH_FAILED,
     }
 }

Answer 1

随时更新

在您的情况下，您应该发送一个 POST 请求来插入一个新帖子。该请求应该将新创建的帖子作为响应。您应该使用该响应来更新您在 redux 状态下的帖子列表。只需将新帖子添加到列表即可。

删除帖子也是如此，一旦您发送了 DELETE 请求，您也应该从状态中删除该帖子。

添加定时缓存

如果你想在你有一段时间没有获取帖子时重新获取它，你应该实现某种缓存解决方案:

当您第一次获取帖子时，您还可以存储请求的时间戳。当用户访问帖子页面时，您可以检查时间戳是否太旧，例如过去 5 分钟，并相应地重新获取它。

每次重新获取

如果您只想在用户每次访问该页面时重新获取帖子，您可以使用 useEffect钩子(Hook)或 componentDidMount 和 componentDidUpdate 的组合。

请注意:

You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you’ll cause an infinite loop.Source