安裝組件和setState後返回undefined的對象屬性

Question

我使用axios.get的回調來設置React組件的狀態。響應的data屬性包含一個用於設置狀態的對象數組。

當我將狀態屬性記錄到控制檯時，沒有問題，我可以看到對象數組。但是，如果我嘗試登錄這些對象的一個​​單獨我得到的錯誤：

不能ResponsiveTable.render

看空的財產「0」

下面是我的組件代碼：

class ResponsiveTable extends React.Component { 

    constructor (props) { 
     super(props) 
     this.state = { 
      returnedQuery: null 
     }; 
    } 

    componentDidMount() { 
     axios.get('/api/latestLeads') 
      .then((response) => { 
       this.setState({ 
        returnedQuery: response.data 
       }); 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 
    } 

    render() { 

     console.log(this.state.returnedQuery[0]); 

     return (
      <div> 
       <h1>test</h1> 
      </div> 
     ); 
    } 
} 

Answer 1

當然，首先渲染你的returnedQuery爲空，所以你得到這個錯誤。

如果你想使用this.state.returnedQuery[0]檢查，如果它的存在，它的長度> 0：

render() { 
     if (this.state.returnedQuery && this.state.returnedQuery.lenth > 0){ 
       return (
        <div> 
         {this.state.returnedQuery.map(...)} 
        </div> 
       ); 
     } else { 
      return <div>loading data...</div> 
     } 
    } 

Answer 2

你可以試試這個：

class ResponsiveTable extends React.Component { 

    constructor (props) { 
     super(props) 
     this.state = { 
      returnedQuery: null 
     }; 
     this.getData(); 
    } 

    getData =() => { 
     axios.get('/api/latestLeads') 
      .then((response) => { 
       this.setState({ 
        returnedQuery: response.data 
       },() => {console.log(this.state.returnedQuery);}); //What does this console.log() say? 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 
    } 

    render() { 

     console.log(this.state.returnedQuery[0]); 

     return (
      <div> 
       <h1>test</h1> 
      </div> 
     ); 
    } 
} 

Answer 3

我發現這是非常相似安德魯的上述解決方案，我使用組件的內部狀態來確定axios.get方法是否已經返回。下面是工作代碼，我現在可以訪問返回數組中的元素及其屬性。

class ResponsiveTable extends React.Component { 

    constructor (props) { 
     super(props) 
     this.state = { 
      returnedQuery: null 
     }; 
    } 

    componentDidMount() { 

     const self = this; 

     // let returnedQuery; 
     axios.get('/api/latestLeads') 
      .then((response) => { 
       self.setState({ 
        returnedQuery: response.data 
       }); 
       console.log(response.data); 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 
    } 

    render() { 
     return (
      <div> 
       <h1>{'This will always render'}</h1> 
       { this.state && this.state.returnedQuery && 
       <div>{this.state.returnedQuery[0].email}</div> 
       } 
      </div> 
     ) 
    } 
}