Reactjs 异步获取数据时呈现表

我有一些数据是在

componentDidMount

时得到的。 我正在尝试使用此数据渲染表。 在我的例子中，行不呈现。 如何将数据发送到tbody

export default class App extends Component {
  constructor(props) {
  super(props);
  this.state={rows:null}
}
  componentDidMount(){
    var rows=[]
    Meteor.http.call("GET", url ,function(error,result){
      $.each(JSON.parse(result.content), function(key, value){
        rows.push(value)
      });
    this.setState({
      rows:rows});
    })
  }
  renderRows(){
    $.each(this.state.rows, function(d){
      return(
        <tr>
          <td>{d[0]}</td>
          <td>{d[1]}</td>
          <td>{d[2]}</td>
          <td>{d[3]}</td>
        </tr>
        )
    })
  }
  render(){
    return(
      <Table>
        <thead>
          <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
          </tr>
        </thead>
        <tbody>
          {this.renderRows}
        </tbody>
      </Table>
    )
  }
}

导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={rows:null}
}
componentDidMount（）{
变量行=[]
Meteor.http.call（“GET”、url、函数（错误、结果）{
$.each（JSON.parse（result.content）、函数（key、value）{
行。推送（值）
});
这是我的国家({
行：行}）；
})
}
renderRows（）{
$.each（this.state.rows，函数（d）{
返回(
{d[0]}
{d[1]}
{d[2]}
{d[3]}
)
})
}
render（）{
返回(
可乐
可乐
可乐
可乐
{this.renderRows}
)
}
}

renderRows

是一个函数，因此需要执行它。此外，您还需要稍微更新该函数：

export default class App extends Component {
  // ...
  componentDidMount(){
    var rows=[];
    var self = this;
    Meteor.http.call("GET", url ,function(error,result){
      $.each(JSON.parse(result.content), function(key, value){
        rows.push(value)
      });

      self.setState({
        rows: rows
      });
    });
  }
  renderRows(){
    const rows = this.state.rows || [];

    return rows.map(d => {
      return(
        <tr>
          <td>{d[0]}</td>
          <td>{d[1]}</td>
          <td>{d[2]}</td>
          <td>{d[3]}</td>
        </tr>
      );
    });
  }
  render(){
    return(
      <Table>
        {/* ... */}
        <tbody>
          {this.renderRows()}
        </tbody>
      </Table>
    )
  }
}

导出默认类应用程序扩展组件{
// ...
componentDidMount（）{
var行=[]；
var self=这个；
Meteor.http.call（“GET”、url、函数（错误、结果）{
$.each（JSON.parse（result.content）、函数（key、value）{
行。推送（值）
});
自我状态({
行：行
});
});
}
renderRows（）{
const rows=this.state.rows | |[]；
返回rows.map（d=>{
返回(
{d[0]}
{d[1]}
{d[2]}
{d[3]}
);
});
}
render（）{
返回(
{/* ... */}
{this.renderRows（）}
)
}
}

另一个不使用JQuery并避免使用单独的渲染函数的选项是使用.map

如果您在列表中的每个元素上都有一个唯一的键，那么React会喜欢它，所以希望行中的一个字段可以用于此目的

  render(){
        return(
          <Table>
            <thead>
              <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
              </tr>
            </thead>
            <tbody>
              {this.state.rows.map(d => (
                <tr key={d[0]}>
                  <td>{d[0]}</td>
                  <td>{d[1]}</td>
                  <td>{d[2]}</td>
                  <td>{d[3]}</td>
                </tr>
              )}
            </tbody>
          </Table>
        )
      }

render（）{
返回(
可乐
可乐
可乐
可乐
{this.state.rows.map（d=>(
{d[0]}
{d[1]}
{d[2]}
{d[3]}
)}
)
}

---

您还需要将行的初始状态设置为

[]

而不是

null

，以便第一次渲染工作。

无法读取未定义的属性“map”。我想，我遇到了问题，因为在赋值变量行未呈现之前尝试呈现数据。立即呈现表，但我从异步回调中获取数据/设置状态-我想这就是问题所在，您需要在回调中调用

.setState