反應路由器，道具在頁面重新加載後不見了

一直呆在這裏一段時間了，我並沒有真的能夠找到答案或工作我的思想圍繞它..所以，我有一個主要組件，爲我服務帶有道具的其他部件稱爲科目。反應路由器，道具在頁面重新加載後不見了

App.js 
-------------------------------- 
getSubjects() { 
    if(Auth.isUserAuthenticated()) { 
     let headers = new Headers(); 
     headers.append('Authorization', `bearer ${Auth.getToken()}`); 
     let fetchInit = { 
      method: 'GET', 
      headers: headers 
     }; 

     return (
      fetch('api/subjects', fetchInit) 
       .then(this.getJSON) 
       .then((data) => { 
        this.setState({ 
         subjects: data.doc 
        }); 
       }) 
     ) 
    } 
} 

<Route path='/editsubject/:id' render={(props) => <EditSubject {...props} 
subjects={this.state.subjects}/> 

Edit.js 
--------------------------------- 
componentWillMount() { 
    let paramId = this.props.match.params.id; 
    let isSubjectItem = this.props.subjects.filter((sub) => { 
     return sub._id === paramId; 
    })[0]; 
    this.setState({subject: isSubjectItem}); 
}

所有這些工作正常，我可以通過編輯組件中的狀態使用我的主題。所有tho，每當我嘗試重新加載/刷新頁面，應用程序崩潰。 props.subjects不確定。我猜App.js發送的部分編輯這些道具在頁面重新加載Edit組件時從不調用。

的localStorage的程序已經越過我的腦海裏，但我寧願避免它，希望它只是我缺少有關如何使用反應工作的一些重要組成部分......

任何幫助，將不勝感激！謝謝

來源

2017-09-16 Kazordomo

刷新頁面時，所有組件狀態和道具都將消失。你需要像'typeof this.props.subjects！=='undefined''這樣的條件，然後才能進行其他操作，顯示某種加載器或某種東西。 –

事實上，當你刷新頁面並直接進入路由器editsubject時，有可能未定義主題（尚未被gettubjects加載）。我不知道你在哪裏調用getSubjects方法，但也許在App構造函數或componentDidMount中是最好的地方。

並解決未定義的問題，你應該使用defaultProps。就像這樣：

Edit.defaultProps = { 
    subjects: [], 
};

這種方式，你不需要做，如果條件太看是否有在對象的數據，而當組件父親的方法加載的主題，一切都會好的工作。

來源

2017-09-16 10:50:25

反應路由器，道具在頁面重新加載後不見了

回答

相關問題