TypeError:无法使用ReactJs读取未定义的属性“ map”

D.格雷夫斯

我收到“ TypeError:无法读取未定义的属性'map'”。不知道我在哪里出错了。关于React,我还是很新,所以我不知道我是否缺少什么。当我尝试调用this.props.meals.map时,这给了我错误

export class Dashboard extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchProtectedData());
    this.props.dispatch(retrieveDailyLogs())
    .then(results => {
        return this.props.dispatch(getDailyLogs(results));
    })
}

getId(id) {
   console.log('test');
   this.props.dispatch(removeDay(id))
   this.props.dispatch(retrieveDailyLogs())
  .then(results => {
    return this.props.dispatch(getDailyLogs(results));
});
}


render() {
    const dailyLogs = this.props.meals.map((day, index) => 
    <li className="card" key={index}>
        <Card handleClick={(id) => this.getId(id)} {...day} />
    </li>
    )
    return (
        <section className="dashboard-container">
            <h1>Dashboard</h1>
            <Link className="log-day-btn" to="/dailylogs">Log Meals</Link>
            <ul className="meal-list">
            {dailyLogs}
            </ul>
        </section>
    );
}
}

const mapStateToProps = state => ({
  meals: state.dailyLogsReducer.dailyLogs
});

export default requiresLogin()(connect(mapStateToProps)(Dashboard));

这是我的减速机,以防万一

import {ADD_DAY, GET_DAILYLOGS, DELETE_DAY} from '../actions/dailyLogs';

const initialState = {
 dailyLogs: [{
    date: null,
    meal1: null,
    meal2: null,
    meal3: null,
    snack: null,
    totalCalories: null,
}]
};

export default function reducer(state = initialState, action) {
 if (action.type === ADD_DAY) {
    return Object.assign({}, state, {
        dailyLogs: [...state.dailyLogs, {
            date: action.date,
            meal1: action.meal1,
            meal2: action.meal2,
            meal3: action.meal3,
            snack: action.snack,
            totalCalories: action.totalCalories
        }]
    });
}
else if(action.type === GET_DAILYLOGS) {
    return Object.assign({}, state, {
            dailyLogs: action.dailyLogs.dailyLogs
    })
}
else if(action.type === DELETE_DAY) {
    return 'STATE';
}
return state;
}

这是我的CombineReducer。它在我的store.js中

combineReducers({
    form: formReducer,
    auth: authReducer,
    protectedData: protectedDataReducer,
    dailyLogsReducer
}),
大卫·冈萨雷斯(David Gonzalez)

渲染方法可以在componentDidMount之前运行。如果在render方法运行时尚未定义this.props.meals,则组件将引发您看到的错误。

您可以在使用映射对象之前检查其是否存在

this.props.meals && this.props.meals.map( // your code here )

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

ReactJS:TypeError:无法读取未定义的属性“ map”

TypeError:无法读取reactjs中未定义的属性'map'

TypeError:无法读取未定义的Reactjs的属性“ map”

ReactJs-TypeError:无法读取未定义的属性“ map”

TypeError:无法读取未定义的Reactjs的属性“ map”?

ReactJs:使用地图浏览状态元素,TypeError:无法读取未定义的属性“ map”?

ReactJS 使用 Ionic Uncaught TypeError:无法从 axios 请求中读取未定义的属性“map”

未捕获的TypeError:无法读取reactjs应用程序中未定义的属性'map'

未捕获到的TypeError:无法读取ReactJs中{Component} .render上未定义的属性“ map”

无法读取未定义的属性“ map”(ReactJS和AJAX)

无法读取ReactJS中未定义的属性“ map”

TypeError:无法读取未定义的属性“ map”

TypeError:无法读取未定义的React Hooks的属性“ map”

反应TypeError:无法读取未定义的属性'map'

React Jest:TypeError:无法读取未定义的属性“ map”

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

TypeError:无法读取未定义<Angular 8>的属性'map'

TypeError:无法读取未定义的React Native的属性'map'

在 ReactJs 中使用 map 函数时出现错误“无法读取未定义的属性‘map’”

Uncaught TypeError:无法使用React读取未定义的属性“ map”

错误TypeError:尝试使用formArray时无法读取未定义的属性“ map”

TypeError:尝试使用LocalStorage而不是useState时,无法读取未定义的属性“ map”

无法使用React Hook读取未定义的属性“ map”

ReactJS:具有数组的硬编码状态,但仍出现TypeError:无法读取未定义的属性“ map”

TypeError:无法读取未定义的属性“ map”,我想使用map实现选择选项,但是存在问题

在React js中使用map函数时,始终出现错误“ TypeError:无法读取未定义的属性'map'”

TypeError:尝试读取通过props传递的数组时,无法读取未定义的属性“ map”

TypeError:无法读取未定义的属性'map'(axios => getData => setState => .map => return elmItem =>错误)

如何:修复ReactJS类型错误-无法读取未定义的属性'map'