Javascript 在请求后再进行反应渲染

我有一个正在加载初始状态的组件：

  getInitialState: function() {
    return {
      panel: "deals",
      showExtension: false,
      person: {}

    };
  },

我要找到一个人：

  componentDidMount: function() {
    this.findPersonFromBackground();
  },
  findPersonFromBackground: function() {
    chrome.runtime.sendMessage({ action: "findPerson", email: this.props.currentEmail.from_email }, function(person) {
      this.setState({person: person});
    }.bind(this));
  },

所以一切都很好。如果这个人被找到了，我会做一件事，如果没有，我会做另一件事

当找到第一个时，视图从未找到状态快速切换到已找到状态，因为API调用非常快

---

等待渲染直到第一次调用返回的最佳方式是什么？

这更像是一个设计问题吗？您可以显示一个微调器、一个空框、一个只显示形状的预览（如Facebook提要），或者什么都不显示

---

如果这是一个技术问题，那么在render（）中返回null。

处理它的一种方法是使用枚举模式。在此代码中，

this.state.person

是正在加载的哨兵、未找到的哨兵或实际的人

var status={loading:{}，notFound:{}；
// ...
getInitialState:函数（）{
返回{person:status.loading}
},
fetchPerson:function（）{
doFetchPerson（函数（person）{
if（person）this.setState（{person:person}）
else此.setState（{person:status.notFound}）
}.绑定（本）
},
render:function（）{
var person=this.state.person）
如果（person==status.loading）。。。
else if（person==status.notFound）。。。
其他的
}

没有什么好方法可以满足您的要求，即在组件启动的某个异步操作完成之前，阻止组件渲染；你能做的最好的事情就是使用这个问题的其他答案中的技巧，在不完整的情况下呈现一些稍微不同的东西

但是，您实际要解决的问题是，如果API请求启动并且很快完成，则会阻止交替呈现内容的短暂闪烁。如果将异步操作移动到组件的父级，则可以确保在渲染子级之前完成异步操作

---

如果Chrome运行时请求持续快速，这可能很好，但在一般情况下，值得考虑的是，如果异步操作需要更长的时间才能完成，会出现什么行为。

也许您需要此项目：

---

您可以使用占位符来保持组件的形状。

您在计时方面做得很好。当API响应不那么快时，我没有考虑95%的百分比。在这种情况下，在它决定返回之前，在那里留下一个空白是不太理想的。很重要的一点。也许两者都有点。至少这些评论让我想到了两者。谢谢很好的反馈。我真的很喜欢这种方法，因为我认为我所处的约束是，最初将

人

设置为

{}

，就好像这个人被查询了，但没有找到

{}

一样。基于不同的状态隔离2是很有意义的，当然也可以更容易地呈现正确的组件来传达该消息。谢谢出于好奇，是不是

status.load==status.notFound

？@brandonhilkert对象是通过引用而不是内容进行比较的，所以

{}！=={}

和

[]！=[]

等。如果您可以添加一个如何解决项目问题的示例，那就太好了。这些是项目中的一些示例。见：