反應天然提取和componentDidMount

我試圖獲取對render方法的一些數據並顯示：加載畫面時反應天然提取和componentDidMount

constructor(props) { 
    super(props); 

    this.state = { 
    job: {} 
    } 
} 

componentDidMount() { 
    fetch(API_URL).then((res) => res.json()).then((res) => this.setState({ job: res.job })); 
} 

render() { 
    return (<Text>{this.state.job.name}</Text>) 
}

但是，我嘗試訪問作業名稱發生異常：

不確定是不是一個對象

我如何獲取從API數據並呈現正常嗎？謝謝。

來源

2017-07-19 user1439898

哪條線就你的錯誤對應？ –

對不起。該行是：this.state.job.name – user1439898

'return（ {this.state.job && this.state.job.name？this.state.job.name：null}）' – Andrew

由於fetch是異步的，您的視圖將嘗試呈現並正在查找尚不存在的name。你可以對此有一個Loading...狀態，如果你在你的render方法希望，像這樣 -

render() { 
    if (!this.state.job.name) { 
    return (
     <div>Loading...</div> 
    ); 
    } 

    return (<Text>{this.state.job.name}</Text>); 
}

來源

2017-07-19 12:40:59 grgmo

'job.name'在第一次渲染時將是未定義的，但我不明白爲什麼會導致異常。 –

fetch是異步的，並且設置狀態之前，首先render會發生。在此之前，this.state.job.name未定義。

不過，我認爲你的錯誤實際上可能來自你處理響應的方式，那你設置this.state.job爲undefined。請注意，下面的代碼是異步的，但不會產生錯誤，即使在定義this.state.job.name之前。

您需要確保您正確處理您的響應，並將this.state.job設置爲對象，否則當您嘗試訪問name屬性時，您會遇到異常。

class Test extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
     job: {} 
 
     }; 
 
    } 
 

 
    componentDidMount() { 
 
     setTimeout(() => this.setState({ 
 
     job: { 
 
      name: "job" 
 
     } 
 
     }), 1000); 
 
    } 
 

 
    render() { 
 
     return (<p>{this.state.job.name}</p>); 
 
    } 
 
} 
 

 
ReactDOM.render(<Test/> , document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

來源

2017-07-19 12:54:29

反應天然提取和componentDidMount

回答

相關問題