Question

我在React应用程序中有一条路线，我可以从两个不同的方向进入，具有不同的含义。

在我的应用主页上，我有一个博客帖子列表。如果我点击指向特定博客帖子的链接（进入此路线的第一种方式），BlogPost组件可以通过在加载HomePage时填充的ID（并将所有博客帖子加载到）中从BlogPostStore获取博客帖子数据商店）。但是，我也可以从博客的管理页面（这不是React应用程序）输入相同的路径，从而绕过HomePage，这意味着博客文章不在商店中。事实上，如果我以这种方式进入路线，商店是空的。

如果我以第一种方式进入路线，商店可以返回博客文章，没有这样的问题，只需返回帖子

 getPost: function(id){
    return _posts[id];
 }

但是，如果考虑到第二种方式进入未填充商店的路径，我需要做一些类似的事情，[通过使用带有ajax请求的return语句创建明显的问题] {{ 3}}

 getPost: function(id){
    if (!_posts[id]){
      /// ajax request
    }
    return _posts[id];
 }

问题：如何重新构建BlogStore的getPost函数，以便在商店中发布帖子，但是当它不在商店中时会回退到ajax请求？

注意，我不认为这是我链接的问题的副本，因为在我的问题中，我首先尝试从商店检索项目（这需要返回它），然后回到ajax请求，如果商店没有填充。

代码：

BlogPost component

    getInitialState(){
         return this.getStateFromStore()

    },
    getStateFromStore(props){
        return {
            post:  BlogStore.getPost(id)
         }
    },
    render: function(){
        return (
             <div> {post.title} </div>
         )
    }

The BlogStore

     _posts = {}
     init(){
        getJSON(API, function(err, res){
             res.forEach(function(post){
              _posts[post.id] = post;
             }
        }
     }
     getPosts: function(){ 
     },
     getPost: function(id){
        return _posts[id];
     }


function getJSON(url, cb){
    var req = new XMLHTTPRequest()
    req.onload = function(){
        if(req.status === 404){
           cb(new Error('not found');
         }else{
           cb(null, JSON.parse(req.response);
         }
    }
    req.open('GET', url)
    req.setRequestHeader('authorization', localStorage.token)
    req.send()
}

Answer 1

请注意，this.emit（＆＃39; gotPosts＆＃39;）将与您的商店支持的任何风格相同。

＆＃13;

The BlogStore

     _posts = {}
     init(){
       this.getPosts();
     }
     getPosts: function(){ 
        getJSON(API, function(err, res){
             res.forEach(function(post){
              _posts[post.id] = post;
             }
             this.emit('gotPosts');
        }
     },
     getPost: function(id){
        var returnPost = _posts[id];
        if (returnPost == null) this.getPosts();
        return returnPost;
     }


function getJSON(url, cb){
    var req = new XMLHTTPRequest()
    req.onload = function(){
        if(req.status === 404){
           cb(new Error('not found');
         }else{
           cb(null, JSON.parse(req.response);
         }
    }
    req.open('GET', url)
    req.setRequestHeader('authorization', localStorage.token)
    req.send()
}

＆＃13;

如果尚未存储在服务器中，如何从服务器获取数据

1 个答案: