javascript - 数据准备好后如何渲染组件？

Question

我正在尝试弄清楚如何在数据准备好时填充/呈现组件？本质上，我有一个脚本可以查询返回数据的服务器，然后解析它并将其放入具有我需要的属性的集合中。然后在另一个文件中，我有正在寻找该对象的 react 组件，但它们同时运行，因此当组件正在寻找它时该对象不存在。

我不确定如何进行。

这是我的组件:

let SliderTabs = React.createClass({
    getInitialState: function() {
        return { items: [] }
    },
    render: function() {
        let listItems = this.props.items.map(function(item) {
            return (
                <li key={item.title}>
                    <a href="#panel1">{item.title}</a>
                </li>
            );
        });

    return (
            <div className="something">
                <h3>Some content</h3>
                    <ul>
                        {listItems}
                    </ul>
            </div>
        );
    }
});

ReactDOM.render(<SliderTabs items={home.data.slider} />,                
    document.getElementById('slider-tabs'));

我如何获取数据:

var home = home || {};

home = {
  data: {
    slider: [],
    nav: []
  },
  get: function() {

    var getListPromises = [];

    $.each(home.lists, function(index, list) {
      getListPromises[index] = $().SPServices.SPGetListItemsJson({
        listName: home.lists[index].name,
        CAMLViewFields: home.lists[index].view,
        mappingOverrides: home.lists[index].mapping
      })
      getListPromises[index].list = home.lists[index].name;
    })

    $.when.apply($, getListPromises).done(function() {
      home.notice('Retrieved items')
      home.process(getListPromises);
    })
  },
  process: function(promiseArr) {
    var dfd = jQuery.Deferred();

    $.map(promiseArr, function(promise) {
      promise.then(function() {
        var data = this.data;
        var list = promise.list;

        // IF navigation ELSE slider
        if (list != home.lists[0].name) {
          $.map(data, function(item) {
            home.data.nav.push({
              title: item.title,
              section: item.section,
              tab: item.tab,
              url: item.url.split(",")[0],
              path: item.path.split("#")[1].split("_")[0]
            })
          })
        } else {
          $.map(data, function(item) {
            home.data.slider.push({
              title: item.title,
              url: item.url.split(",")[0],
              path: item.path.split("#")[1]
            })
          })
        }
      })
    })

    console.log(JSON.stringify(home.data))
    dfd.resolve();
    return dfd.promise();
  }
}

$(function() {
  home.get()
})

Answer 1

在 React 中执行此操作的一种常见方法是跟踪何时获取数据。这可以做到，例如通过在您的状态中使用 isFetching 字段:

// This would be your default state
this.state = {
  isFetching: false
};

然后，当您触发请求时(最好在 componentDidMount 中)，您可以使用以下方法将 isFetching 设置为 true:

this.setState({ isFetching: true });

最后，当数据到达时，您再次将其设置为 false:

this.setState({ isFetching: false });

现在，在你的渲染函数中你可以做这样的事情:

render () {
 return (
    <div className="something">
      <h3>Some content</h3>
      {this.state.isFetching ? <LoadingComponent /> : (
         <ul>
           {listItems}
         </ul>
      )}
    </div> 
  )
}

通过使用状态，您不必担心告诉您的组件做某事，而是它对状态的变化使用react并相应地呈现它。

更新:

如果您打算实际使用 React，我建议您将您的方法更改为我上面描述的方法(在 the React docs 中阅读更多内容)。也就是说，将 get 函数中的代码移动到 React 组件的 componentDidMount 函数中。如果那是不可能的，你可能只是等着打电话

ReactDOM.render(
  <SliderTabs items={home.data.slider} />,                
  document.getElementById('slider-tabs')
);

直到您的数据到达。