Question

使用：Vanilla React和Flux 火力

我正在努力让我的商店与实时更新保持同步，因此我一直在遵循本文的说明Handling Synchronized Arrays with Real-Time Firebase Data

我已经调用WebAPI实用程序类来获取初始数据，并按照许多人的指示将其放在我的顶级组件的 componentWillMount 监听器中。代码看起来像这样。

var MessageSection = require('./MessageSection.react');
var React = require('react');
var ThreadSection = require('./ThreadSection.react');
var ChatWebAPIUtils = require('../utils/ChatWebAPIUtils');
var ChatApp = React.createClass({

  componentWillMount: function(){
    ChatWebAPIUtils.getAllMessages(); **Here is my call to an action**
  }

  render: function() {
    return (
      <div className="chatapp">
        <ThreadSection />
        <MessageSection />
      </div>
    );
  }

});

module.exports = ChatApp;

问题在于，即使我的商店将被正确加载，看起来因为它是异步提取，将会调用渲染其数据尚未准备好的组件。

在我的程序尝试渲染自己之前，等待商店初始化的常规方法是什么？

Answer 1

您可以为此使用组件状态。

getInitialState() {
    return {
        messagesLoaded: false,
        messages: [],
        threads: []
    }
},
onMessagesLoaded() {
    this.setState({
        messagesLoaded: true,
        messages: ChatWebAPIUtils.messages,
        threads: ChatWebAPIUtils.threads
    });
},
componentDidMount() {
    ChatWebAPIUtils.getAllMessages(this.onMessagesLoaded.bind(this))
},
render() {
    if(!this.state.messagesLoaded) {
        return (<div className="chatapp">Loading...</div>);
    }

    return (
        <div className="chatapp">
            <ThreadSection />
            <MessageSection />
        </div>
    );
}

将消息和线程的初始状态设置为空数组。组件一旦挂载，就会调用异步函数并将回调函数传递给它，然后更新组件的状态 - 从而导致组件（以及接收新状态的子节点）更新。只要未加载数据，就会显示“正在加载”消息。

还应该可以在componentWillMount（）部分中调用getMessages函数。

我想MessagesSection应该只显示当前所选线程的消息。我没有考虑到这个例子 - 所以你必须在某处添加这个逻辑。

编辑添加了有关在加载数据之前阻止呈现子组件的信息。

Flux - 如何初始加载使用异步获取的数据存储数据

1 个答案: