React - Axios數據不會呈現一次獲取的數據

Question

因此，我有一個運行Axios請求的React組件，結果設置爲我的'ist'狀態屬性，然後在渲染上進行檢查。

我的問題是，因爲它是一個異步請求，第一渲染檢查跑進return <p>Loading...</p>;

我正在尋找一種方式，我的組件以使負荷直到aync要求擁有完整，然後渲染結果。

這裏是我的代碼：

// defealts 
import React from 'react'; 
import { Helmet } from 'react-helmet'; 
import axios from 'axios'; 

class Home extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     pageName: 'Home', 
     list: '', 
    }; 
    } 

    componentDidMount() { 
    this.test(); 
    } 

    test =() => { 
    axios.get('https://api.myjson.com/bins/vqqml') 
    .then((response) => { 
     /* eslint-disable no-console */ 
     console.log(response); 
     /* eslint-enable no-console */ 
     this.setState({ list: response.data }); 
    }) 
    .catch((error) => { 
     /* eslint-disable no-console */ 
     console.log(error); 
     /* eslint-enable no-console */ 
    }); 
    }; 

    render() { 
    if (this.state.list.data) { 
     return (
     <div> 
      <p>{this.state.list.data.name}</p> 
     </div> 
    ); 
    } 
    return <p>Loading...</p>; 
    } 
} 

export default Home; 

任何幫助或建議表示讚賞 - 謝謝你提前。

Answer 1

它不會呈現，因爲this.state.list沒有data屬性，它有name，age和car性能。

你的API調用的迴應是：

{"name":"John","age":30,"car":null} 

，而不是

{"data":{"name":"John","age":30,"car":null}} 

Answer 2

你可以只創建state稱爲loaded另一個屬性並將其設置爲true如果你得到一個答覆。 this.setState({ list: response.data, loaded: true });

然後問你render：

if(this.state.loaded) {...}

你得提供你response，以檢查是否data屬性，即使在它。你可能混淆了axiosresponse.data用別的東西像@AndyGaskell已經提到

Answer 3

你可以嘗試使用shouldComponentUpdate()

shouldComponentUpdate(){ 
    if (nextState. list == this.state.list) { 
     return false; 
    } 
}