javascript - 在 React 中使用 map 函数时出错

Question

我尝试使用 map 功能显示一些数据，但我不断收到警告和错误。 他们是

警告:React 性能测量代码中存在内部错误。没想到 componentDidMount 计时器会启动，而另一个实例的渲染计时器仍在进行中。

还有一个是

未捕获的类型错误:无法读取未定义的属性“映射”

我发现 this.props.courses.map 返回 null 但我仍然不明白为什么？

import React,{PropTypes} from 'react';
import {connect} from 'react-redux';
import * as courseActions from '../actions/courseActions';


class CoursesPage extends React.Component{

    constructor(props,context){
       super(props,context);

       this.state={
         course:[{id:1,title:'hello'}]
       };

       this.onTitleChange = this.onTitleChange.bind(this);
       this.onClickSave = this.onClickSave.bind(this);

    }

    onTitleChange(event){
      const course = this.state.course;
      course.title = event.target.value;
      this.setState({course:course});
    }

    onClickSave(){
       this.props.dispatch(courseActions.createCourse(this.state.course));
    }

    courseRow(){
      return this.props.courses.map((course)=>{
          return(
            <div key={course.id}>{course.title}</div>
          );
      });
    }

    render(){
      return(
        <div>
          <h2>hello</h2>
          <h3>{this.courseRow()}</h3>
          <input type="text" onChange={this.onTitleChange} value={this.state.course.title}/>
          <input type="submit" value="save" onClick={this.onClickSave}/>
        </div>
      );
    }

}

CoursesPage.propTypes ={
   dispatch: PropTypes.func.isRequired,
   courses: PropTypes.array.isRequired
};

function mapStateToProps(state,ownProps){
     return{
        courses:state.courses
     };
}

export default connect(mapStateToProps)(CoursesPage);

这是我的 reducer

export default function courseReducer(state = [],action){
    switch(action.type){
       case 'CREATE_USER':
         state.push(action.user);
          return [...state,Object.assign({},action.user)];
         default:
          return state;
      }
}

我的根 reducer

import {combineReducers} from 'redux';
import users from './userReducer';
import courses from './courseReducer';

const rootReducer = combineReducers({
  users:users,
  courses:courses
});

export default rootReducer;

商店

import {createStore,applyMiddleware} from 'redux';
import rootReducer from '../reducers/rootReducer';

export default function configureStore(initialState){
  return createStore(
     rootReducer,
     initialState
   );
}

Answer 1

你的 Redux store 的 courses 可能在开始时是 undefined 因此 this.props.courses 变成了 undefined .尝试访问 undefined 的 .map 会给你上面提到的错误。有几种方法可以解决此问题:

方法 1(推荐):在您的 reducer 中将 state.courses 的初始值设置为空数组 []。请参阅有关 Reducers 的文档以了解如何设置初始状态:http://redux.js.org/docs/basics/Reducers.html .

方法 2:在 mapStateToProps 中为 props.courses 设置一个默认值。

function mapStateToProps(state,ownProps){
  return {
    courses: state.courses || []
  };
}

方法 3:在渲染之前检查 this.props.courses 不是 undefined 或 null:

courseRow() {
  if (!this.props.courses) {
    return null;
  }

  return this.props.courses.map((course)=>{
    return(
      <div key={course.id}>{course.title}</div>
    );
  });
}