javascript - 未调用 componentDidMount

Question

我有一个组件似乎没有触发 componentDidMount 事件。该组件是通过另一个组件使用 react-router Link 访问的父组件。

这是我的列表组件和子组件:

类(class)页面

import React from 'react';
import CourseList from './CourseList';
import CourseApi from '../../api/courseApi';

import {browserHistory} from 'react-router';

class CoursesPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            courses: []
        };
        this.redirectToAddCoursePage = this.redirectToAddCoursePage.bind(this);
    }

    componentDidMount(){
        CourseApi.getAllCourses().then(coursesData => {
            this.setState({ courses: coursesData });
        }).catch(error => {
            throw(error);
        });
    }

    redirectToAddCoursePage() { browserHistory.push('/course'); }

    render() {
        const courses = this.state.courses;
        return (
            <div>
                <div className="page-header">
                    <h3>Courses</h3>
                </div>
                <input type="submit" value="New Course" className="btn btn-default btn-toolbar pull-right" onClick={this.redirectToAddCoursePage} />
                <div className="panel panel-default ">
                    <div className="panel-heading">
                        <span>&nbsp;</span>
                    </div>
                    <CourseList courses={courses} />
                </div>
            </div>        
        );
    }
}

export default CoursesPage;

类(class)列表行

import React from 'react';
import PropTypes from 'prop-types';
import CourseListRow from './CourseListRow';

const CourseList = ({courses}) => {
    return (
        <table className="table table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Category</th>
                    <th>Length</th>
                </tr>
            </thead>
            <tbody>
                { courses.map(course => <CourseListRow key={course.CourseId} course={course} /> )}
            </tbody>
        </table>
    );
};

CourseList.propTypes = {
    courses: PropTypes.array.isRequired
};

export default CourseList;

类(class)列表行

import React from 'react';
import PropTypes from 'prop-types';
import {Link} from 'react-router';

const CourseListRow = ({course}) => {
    return (
        <tr>
            <td><Link to={'/course/' + course.CourseId}>{course.CourseId}</Link></td>
            <td>{course.Title}</td>
            <td>{course.Author.FirstName + ' ' + course.Author.LastName}</td>
        </tr>
    );
};

CourseListRow.propTypes = {
    course: PropTypes.object.isRequired
};

export default CourseListRow;

我的路线

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
import CoursesPage from './components/course/CoursesPage';
import ManageCoursePage from './components/course/ManageCoursePage';

export default (
    <Route path="/" components={App}>
        <IndexRoute component={HomePage} />
        <Route path="courses" component={CoursesPage} />
        <Route path="course" component={ManageCoursePage} />
        <Route path="course/:id" component={ManageCoursePage} />
    </Route>
);

以上所有组件都可以正常工作。但是，当我单击 CourseListRow 组件中类(class)的链接以路由到下面的组件时，类(class)对象的状态始终为空。我在 componentDidMount 事件中放置了一条调试器语句，但它从未命中它，因此该组件 CourseForm 子组件(未显示)永远不会获得类(class):

import React from 'react';
import PropTypes from 'prop-types';
import CourseForm from './CourseForm';
import {authorSelectData} from '../../selectors/selectors';
import CourseApi from '../../api/courseApi';
import AuthorApi from '../../api/authorApi';

export class ManageCoursePage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            course: {},
            authors: [],
        };
    }

    componentDidMount() {
        let id = this.props.params.id;
        if (id) {
            CourseApi.getCourse(id).then(courseData => {
                this.setState({ course: courseData });
            }).catch(error => {
                throw(error);
            });
        }

        AuthorApi.getAllAuthors().then(authorsData => {
            this.setState({
                authors: authorSelectData(authorsData)
            });
        }).catch(error => {
            throw(error);
        });
    }

    render() {
        return (
            <CourseForm 
                course={this.state.course}
                allAuthors={this.state.authors}
            />
        );
    }
}


ManageCoursePage.contextTypes = {
    router: PropTypes.object
};

export default ManageCoursePage;

对于我的生活，我不明白为什么 componentDidMount 没有触发和填充类(class)状态对象。感谢任何帮助

跟进:

我将父组件 (ManageCoursePage) 的呈现方法更改为以下内容，注释掉 CourseForm 子组件:

render() {
    return (
        <h2>Hi {this.state.course.CourseId}</h2>
        /*<CourseForm 
            course={this.state.course}
            authors={this.state.authors}
            onChange={this.updateCourseState}
            onSave={this.saveCourse}
            onDelete={this.deleteCourse}
            onCancel={this.cancelChange}
            errors={this.state.errors}
            saving={this.state.saving}
            deleting={this.state.deleting}
        />*/
    );
}

这很有效，我得到了“Hi 11”。无论出于何种原因，我的子组件似乎都没有从我的 parent 那里收到 Prop 。这可能与 react 路由器有关，我错过了什么吗？这让我很困惑

Answer 1

我认为在 componentWillReceiveProps 而不是 ComponentDidMount 中调用 getCourse 将解决您的问题。

  componentWillReceiveProps(nextProps) {
        var nextId = nextProps.params.id;
        if (nextId !== this.props.params.id) {
                  CourseApi.getCourse(nextId).then(courseData => {
                    this.setState({ course: courseData });
                }).catch(error => {
                    throw(error);
                });
        }
    }