Question

我对反应，反应本机和redux相对较新，我对从api获取数据并更新状态有一个疑问。

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

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

如果仅通过componentDidMount生命周期方法获取数据，那么我将不会总是有新数据。

示例：有两个屏幕Post和Posts。如果用户首次打开帖子屏幕，则会触发componentDidMount并获取和呈现帖子。然后，他进入“帖子”屏幕添加一个新帖子，然后返回“帖子”屏幕，然后他将看不到该新帖子，因为这些帖子将以在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

随时更新

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

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

添加定时缓存

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

首次获取帖子时，您还可以存储请求的时间戳。当用户访问“帖子”页面时，您可以检查时间戳是否太旧，例如过去5分钟，然后进行相应的重新提取。

每次都刷新

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

请注意：

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

Answer 2

您可以使用componentDidUpdate

用户每次打开屏幕时如何获取数据以及仅在获取的数据与状态中的当前数据不同的情况下

2 个答案:

随时更新

添加定时缓存

每次都刷新