在React中使用map函数时的错误

Errors while Using map functions in React

本文关键字：函数 错误 map React      更新时间：2023-09-26

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

警告:React性能度量代码中存在内部错误。没有期望componentDidMount定时器启动，而渲染定时器仍在进行另一个实例。

另一个是

Uncaught TypeError: Cannot read property 'map' of undefined

我发现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
   );
}

您的Redux存储的courses可能在开始时是undefined，因此this.props.courses成为undefined。试图访问undefined的.map会给你上面提到的错误。有几种方法可以解决这个问题:

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

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

你在哪里更新课程?我只能从你发布的代码中看到用户。

 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>

在@Harkirat Saluja和@杨顺的帮助下修改代码后。我设法解决了初始化课程的问题，因此我将我的Reducer更改为如下

state = []成功了!

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

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

function mapStateToProps(state,ownProps){
     return{
        ...state.courses
     };
}
相关文章：