在 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

您的mapStateToProps 正在返回一个reducer，而不是您可以立即使用的实际props。它应该看起来像这样：

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

Answer 2

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

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

Answer 3

在你的减速器中你在哪里更新课程？我只能从您发布的代码中看到用户。

 const initialState = {
        courses : [],
 }



export default function courseReducer(state =initialState,action){
    switch(action.type){
       //create a course or update it , else value is 
       //undefined and your map would throw error.
       case 'CREATE_COURSES':
         return Object.assign({},state,{
                 courses : action.user}
          );
         default:
          return state;
      }
}

此外，在您的渲染方法中，您需要检查此值是否已填充，然后仅运行地图。

 <h3>{this.props.courses.length > 1 ? this.courseRow() : null}</h3>

Answer 4

在@Harkirat Saluja 和@Yang Shun 的帮助下修改了代码。我设法解决了初始化课程的问题，所以我改变了我的减速器，如下所示

state = [] 成功了！

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

        }
    }