Question

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

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

CoursesPage

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;

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;

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;

我的路线

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组件中的路线链接以路由到下面的组件时，课程对象的状态始终为空。我在componentDidMount事件中放置了一个调试器语句，它从不命中它，所以这个组件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;

对于我的生活，我无法理解为什么componentDidMount没有触发并填充课程状态对象。任何帮助表示赞赏

跟进：

我将我的父（ManageCoursePage）组件的render方法更改为以下内容，注释掉了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}
        />*/
    );
}

这很有效，我得到了“嗨11”。无论出于何种原因，我的孩子组件都没有收到我父母的道具。这可能与反应路由器有关，我错过了一些东西吗？这让我感到非常困惑

Answer 1

我认为在componentWillReceiveProps中调用getCourse而不在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);
                });
        }
    }

Answer 2

好吧，我明白了。这个应用程序最初使用redux，我从应用程序中删除。我想，因为我只是在学习反应，马上加入redux可能会让我想念反应是如何起作用的。

无论如何，问题是我的子组件中的一行代码（未在帖子中显示）。出于使用redux的原因，我不得不将数字转换为字符串以使其工作：

value={ course.CourseId.toString() }

这是错误的路线。

未捕获的TypeError：无法读取属性＆＃39; toString＆＃39;未定义的

由于render方法在componentDidMount之前运行并且尚未设置课程对象属性，因此tostring尝试转换未定义的值。它在调用componentDidMount之前爆炸，这就是为什么我在调试时从未点击它。

我不知道我是如何误解这个错误的，但是一旦我摆脱了toString（），它就会奏效。

Answer 3

我遇到了同样的问题。这是它如何发生以及我是如何解决它的。我有父组件A，它包含子组件B. 我更新A以生成新的子组件B'而不是B（但是B＆amp; B'是相同的类型，内容是不同的）。所以A会触发“componentDidMount”，B会触发“componentDidMount”而不是B'。我花了一点时间才明白React实际上重用了组件，只改变了它的内容而不是重新创建它。

我的解决方案是为B＆amp;添加“唯一密钥”。 B'

key={`whateverMakesIt_${Unique}`}

就像我的组件B'开始正确触发其调用一样简单。

componentDidMount未调用

3 个答案: