React AJAX 데이터를 렌더링하지 않음

Question

react를 사용하여 테이블에 데이터를로드하려고 시도했지만 조각 렌더링을 시도 할 때 데이터가 존재하는 지점에 도달했지만 실제로 dom을 업데이트하지 않는 것 같습니다. 나는 시험 (렌더링하고 TBODY 아래의 {} 블록의 단편을 실행하면 데이터가 실제로 존재 알고있다. 어떤 도움이 좋지 않을까, 감사합니다.

import React from 'react'; 

class InvoicePickTable extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = {invoices:[]}; 
    } 

    getInvoiceData(){ 
     return new Promise(function(resolve, reject) { 
      console.log("hi"); 
      resolve([{number: "1"},{number: "2"},{number: "3"}]); 
     }) 

    } 
    componentDidMount() { 
     const self = this; 
     self.getInvoiceData() 
     .then((response) => { 
      self.setState({invoices: response}); 
     }) 
     .catch((err) => { 
      console.error(err); 
     }); 
    } 
    render() { 
     return (
      <table> 
       <thead> 
        <tr> 
         <th>Invoice #</th> 
         <th>Task Price</th> 
         <th>Balance</th> 
         <th>Task Name</th> 
        </tr> 
       </thead> 
       <tbody> 
       { 

        this.state.invoices.forEach(function (invoice) { 
         console.log("in"); 
         console.log(invoice); 
         return (
          <tr> 
           <td>{invoice.number}</td> 
          </tr> 
         ); 
        }) 
       } 
       </tbody> 
      </table> 
     ); 
    } 

} 

export default InvoicePickTable; 

Answer 1

사용

this.state.invoices.map(invoice => <tr><td>{invoice.number}</td></tr>) 

Array.forEach 실제로 배열을 반환하지 않습니다

Answer 2

나는 그것을 고쳤다, 당신은 각각을 위해지도를 사용할 필요가있다, 이것이 누군가를 돕기를 바란다!

import React from 'react'; 

class InvoicePickTable extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = {invoices:[]}; 
    } 

    getInvoiceData(){ 
     return new Promise(function(resolve, reject) { 
      console.log("hi"); 
      resolve([{number: "1"},{number: "2"},{number: "3"}]); 
     }) 

    } 
    componentDidMount() { 
     const self = this; 
     self.getInvoiceData() 
     .then((response) => { 
      self.setState({invoices: response}); 
     }) 
     .catch((err) => { 
      console.error(err); 
     }); 
    } 
    render() { 
     return (
      <table> 
       <thead> 
        <tr> 
         <th>Invoice #</th> 
         <th>Task Price</th> 
         <th>Balance</th> 
         <th>Task Name</th> 
        </tr> 
       </thead> 
       <tbody> 
       { 

        this.state.invoices**.map**(function (invoice) { 
         console.log("in"); 
         console.log(invoice); 
         return (
          <tr **key = {invoice.number}**> 
           <td>{invoice.number}</td> 
           <td>1231</td> 
           <td>4</td> 
           <td>A Task</td> 
          </tr> 
         ); 
        }) 
       } 
       </tbody> 
      </table> 
     ); 
    } 

} 

export default InvoicePickTable; 

Answer 3

here는 AJAX map 및 기능 데이터를 렌더링의 좋은 예이다.