Question

现在已经坚持了一段时间，我真的无法找到答案或者无法理解它。所以，我得到了一个主要组件，用一个名为subject的道具为我的其他组件提供服务。

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});
}

所有这一切都很好，我可以通过编辑组件中的状态使用我的主题。所有这些，每当我尝试重新加载/刷新页面时，应用程序崩溃。 props.sjects未定义。我正在猜测App.js发送的部分编辑道具在编辑组件中重新加载页面时永远不会调用。

本地存储程序已经超出了我的想法，但我宁愿避免它，希望它只是关于如何处理反应的一些关键部分......

任何帮助将不胜感激！感谢

Answer 1

实际上，当您刷新页面并直接进入路由器editsubject时，主题可能是未定义的（未通过getSubjects加载）。我不知道你在哪里调用getSubjects方法，但可能在App构造函数或componentDidMount中是最好的地方。

要解决未定义的问题，您应该使用defaultProps。像这样：

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

这样你也不需要制作if条件，看看主题中是否有数据，当组件父亲中的方法加载主题时，一切都会正常工作。

React路由器，页面重新加载后道具消失了

1 个答案: