Javascript 组件未调用

我有一个组件似乎没有触发

componentDidMount

事件。该组件是通过另一个组件使用react路由器链接访问的父组件

以下是我的列表组件和子组件：

课程页面

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;

从“React”导入React；
从“/CourseList”导入课程列表；
从“../../api/CourseApi”导入CourseApi；
从“react router”导入{browserHistory}；
类CoursesPage扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
课程：[]
};
this.redirectToAddCoursePage=this.redirectToAddCoursePage.bind（this）；
}
componentDidMount（）{
CourseApi.getAllCourses（）.then（coursesData=>{
this.setState（{courses:coursesData}）；
}).catch（错误=>{
抛出（错误）；
});
}
重定向到AddCoursePage（）{browserHistory.push（'/course'）；}
render（）{
const courses=this.state.courses；
返回(
课程
);
}
}
导出默认课程页面；

CourseListRow

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;

从“React”导入React；
从“道具类型”导入道具类型；
从“/CourseListRow”导入CourseListRow；
常量课程列表=（{courses}）=>{
返回(
身份证件
标题
作者
类别
长度
{courses.map（courses=>）}
);
};
CourseList.propTypes={
课程：PropTypes.array.isRequired
};
导出默认课程列表；

CourseListRow

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;

从“React”导入React；
从“道具类型”导入道具类型；
从“反应路由器”导入{Link}；
const CourseListRow=（{course}）=>{
返回(
{course.CourseId}
{课程名称}
{course.Author.FirstName+''+course.Author.LastName}
);
};
CourseListRow.propTypes={
课程：PropTypes.object.isRequired
};
导出默认课程列表；

我的路线

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

从“React”导入React；
从“react router”导入{Route，IndexRoute}；
从“./components/App”导入应用程序；
从“./components/course/CoursesPage”导入CoursesPage；
从“./components/course/ManageCoursePage”导入ManageCoursePage；
导出默认值(
);

以上所有组件都工作正常。但是，当我单击CourseStrow组件中某个课程的链接以路由到下面的组件时，课程对象的状态始终为空。我在componentDidMount事件中放置了一个调试器语句，但它从未命中它，因此此components CourseForm子组件（未显示）从未获得课程：

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;

从“React”导入React；
从“道具类型”导入道具类型；
从“/CourseForm”导入CourseForm；
从“../../selectors/selectors”导入{authorSelectData}；
从“../../api/CourseApi”导入CourseApi；
从“../api/AuthorApi”导入AuthorApi；
导出类ManageCoursePage扩展React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
课程：{}，
作者：[]，
};
}
componentDidMount（）{
设id=this.props.params.id；
如果（id）{
CourseApi.getCourse（id）.then（courseData=>{
this.setState（{course:courseData}）；
}).catch（错误=>{
抛出（错误）；
});
}
AuthorApi.getAllAuthors（）.then（authorsData=>{
这是我的国家({
作者：authorSelectData（authorsData）
});
}).catch（错误=>{
抛出（错误）；
});
}
render（）{
返回(
);
}
}
ManageCoursePage.contextTypes={
路由器：PropTypes.object
};
导出默认ManageCoursePage；

就我个人而言，我无法理解为什么componentDidMount没有触发并填充课程状态对象。谢谢你的帮助

跟进：

我将父组件（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}
        />*/
    );
}

render（）{
返回(
嗨{这是州。课程。课程ID}
/**/
);
}

---

这成功了，我得到了“嗨11”。无论出于何种原因，我的子组件都没有从我的父组件接收道具。这可能与我遗漏了什么有关吗？这让我非常困惑

我认为在Component中调用getCourse将接收Props，而不是在ComponentDidMount中调用getCourse将解决您的问题

组件将接收道具（下一步）{
var nextId=nextrops.params.id；
if（nextId！==this.props.params.id）{
CourseApi.getCourse（nextId）.then（courseData=>{
this.setState（{course:courseData}）；
}).catch（错误=>{
抛出（错误）；
});
}
}

好吧，我想出来了。这个应用程序最初使用的是redux，我从应用程序中删除了它。我想，因为我只是在学习react，立即加入redux可能会让我错过react的真正工作原理

无论如何，问题是我的子组件中有一行代码（文章中没有显示）。在使用redux时，出于什么原因，我必须将数字转换为字符串才能正常工作：

value={ course.CourseId.toString() }

这条线错了

未捕获的TypeError:无法读取未定义的属性“toString”

因为渲染方法

key={`whateverMakesIt_${Unique}`}