Question

我有一些数据在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>
    )
  }
}

Answer 1

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>
    )
  }
}

Answer 2

另一个不使用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>
        )
      }

您还需要将行的初始状态设置为[]而不是null，以便第一个渲染工作。

获取数据异步时呈现表

2 个答案: