在 React 中使用地图函数时出错

Question

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

警告：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);

这是我的减速机

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

我的 rootReducer

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 商店courses可能undefined在开头，因此this.props.courses变成undefined. 尝试访问.mapofundefined会给你上面提到的错误。有几种方法可以解决这个问题：

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

方法 2：为props.coursesin设置默认值mapStateToProps。

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