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

Question

我对react、react native和redux比较陌生，我有一个关于从api获取数据和更新状态的问题。

我想做的是：-每次用户打开屏幕（即POST）时，我都想从api获取数据并更新状态。

因此：-我总是在状态中新获取数据并在屏幕上呈现。

如果我只取数据在组件didMount生命周期方法，那么我不会总是有新鲜的数据。

示例：有两个屏幕Post和Post。如果用户第一次打开posts屏幕，则会触发componentDidMount并获取和呈现POST。然后他转到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)

行动

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

您可以使用componentdiddupdate

Answer 2

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

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

如果您想在一段时间内未提取帖子时重新提取帖子，则应实施某种缓存解决方案：

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

如果您想在用户每次访问该页面时简单地重新回帖，可以使用useEffect挂钩或组合使用componentDidMount和componentDidUpdate。

请注意:

您可以在componentDidUpdate（）中立即调用setState（），但请注意，必须将其包装在上面示例中的条件中，否则将导致无限循环。来源