Question

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

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

另一个是

未捕获的TypeError：无法读取未定义的属性“map”

我发现 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。尝试访问.map的{{1}}会给您上面提到的错误。有几种方法可以解决这个问题：

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

方法2：在[]中设置props.courses的默认值。

mapStateToProps

方法3：在呈现之前检查function mapStateToProps(state,ownProps){ return { courses: state.courses || [] }; }不是this.props.courses或undefined：

null

Answer 2

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

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

同样在你的渲染方法中，你需要检查这个值是否已填充，然后才运行map。

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

Answer 3

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

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

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中使用映射函数时出错

4 个答案: