反应路由器，道具在页面重新加载后不见了

一直呆在这里一段时间了，我并没有真的能够找到答案或工作我的思想围绕它..所以，我有一个主要组件，为我服务带有道具的其他部件称为科目。反应路由器，道具在页面重新加载后不见了

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

反应路由器，道具在页面重新加载后不见了

回答

相关问题