Question

尝试使用React显示数据时遇到问题。数据首先在普通的JS函数中计算，并且在React渲染其数据时尚未准备就绪。表...

这是对JS函数的调用：

<script type="text/javascript">
    jQuery(document).ready(function(){
        derivePairs();
        alert(config.pairs.length);
    });
</script>

该函数确定模拟足球联赛的循环对（config.pairs是它们的全局变量）。我想在React渲染表中显示这些对。

这是表格渲染的反应代码......

var Table = React.createClass({

      getInitialState: function() {
        return {data: this.props.data};
      },

      render: function() {
          var headerComponents = this.generateHeaders(),
              rowComponents = this.generateRows();

          return (
              <table>
                  <thead>{headerComponents}</thead>
                  <tbody>{rowComponents}</tbody>
              </table>
          );
      },

      generateHeaders: function() {
          var cols = this.props.cols;  // [{key, label}]

          // generate our header (th) cell components
          return cols.map(function(colData) {
              return <th key={colData.key}>{colData.label}</th>;
          });
      },

      generateRows: function() {
          var cols = this.props.cols,  // [{key, label}]
              data = this.props.data;

          alert(this.props.data.length);
          var dataMap = this.props.data.map(function(item) {
            alert(item.homeTeam);
          });

          return this.state.data.map(function(item) {
              // handle the column data within each row
              alert(item);
              var cells = cols.map(function(colData) {
                  alert("test");
                  console.log(colData);
                  // colData.key might be "firstName"
                  return <td> {item[colData.key]} </td>;
              });
              return <tr key={item.id}> {cells} </tr>;
          });
      }
  });

  ReactDOM.render(<Table cols={columns} data={config.pairs}/>, document.getElementById('roundPairs'));

现在我理解为什么在React渲染时为什么config.pairs是空的，我需要一些关于如何在计算它们时将这些值传递给React的帮助......如果可以，请帮忙。

Answer 1

您有三种选择。

第一个是延迟Table组件的呈现，直到数据准备就绪。这可以通过将呈现代码作为回调传递给derivePairs函数来实现。就个人而言，我发现这是实现理想结果的一种非常笨拙的方式。

另一种方法是使用React组件的生命周期方法。在你的情况下，componentWillMount最有意义。您可以运行在此处获取数据的代码以及何时可用，您可以相应地设置状态，React将使用新数据重新呈现您的组件。这是一个很好的解决方案，但它也将数据提取逻辑绑定到Table组件。根据您的设计和未来需求，这可能会或可能不会起作用。

在我看来，最好的方法是创建另一个实际包装Table组件的组件。它将管理数据获取并将相关数据传递给Table组件。这样，您的Table组件将不需要知道如何获取其数据，并且它将使用您提取/生成的数据正确呈现。

通过JS获取数据后呈现表反应

1 个答案: