Render table при получении данных асинхронно

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

Реагировать нравится, если у вас есть уникальный ключ для каждого элемента в списке, так что, надеюсь, одно из полей вашей строки может служить этой цели.

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, для того, чтобы первый рендеринг работать.