在 React 中使用 map 函数时出错

Question

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

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

另一个是

未捕获类型错误：无法读取未定义的属性'map'

我发现 this.props.courses.map returns 为空，但我还是不明白为什么？

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 正在返回一个减速器，而不是您可以立即使用的实际 props。它应该看起来像这样：

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

Answer 2

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

方法 1（推荐）： 在减速器中将 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 的帮助下修改代码后。我设法解决了初始化课程的问题，所以我更改了我的 Reducer，如下所示

state = [] 成功了！

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

        }
    }

在 React 中使用 map 函数时出错

Errors while Using map functions in React

javascript

ecmascript-6

reactjs

redux

react-redux