自己练习的redux小项目，TypeError: Cannot read property 'map' of undefined

Question

TodoList.js

import React, { Component, PropTypes } from 'react'
import Todo from './Todo'

/*

    (todo, index) =>
        <Todo {...todo}
            key={index}
            onClick={() => this.props.onTodoClick(index)} />

    参数todo，index
    
    onClick={return this.props.onTodoClick(index)}

    var f = () => 5;
    // 等同于
    var f = function () { return 5 };

    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2) {
        return num1 + num2;
    };

    由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

    var getTempItem = id => ({ id: id, name: "Temp" });

*/


export default class TodoList extends Component {
    /*
        function ListItem(props) {
            // Correct 正确的 ! There is no need to specify the key here:
            return <li>{props.value}</li>;
        }

        const listItems = numbers.map((number) =>
        // Correct! Key should be specified inside the array.
            <ListItem key={number.toString()}
                value={number} />
        );
     */

    /*

        数据格式
        {
            text: action.text1,
            completed: false
        },
        {
            text: action.text2,
            completed: false
        },
        {
            text: action.text3,
            completed: false
        }

     */

    /*
        遍历父元素的 this.props.todos
     */

    /*
        this.props.todos.map((todo, index) =>
            <Todo {...todo}
                key={index}
                    />)

     */
    render() {
        return (
            <ul>
                {
                    this.props.todos&&Array.isArray(this.props.todos)&&this.props.todos.map(()=>{
                        <Todo {...todo}
                              key={index}
                            />})
                }
            </ul>
        )
    }
}

项目地址如下

地址

在redux02中

9月29日修改

这次文件不大了，重现传了，修改后还是不好使

Answer 1

在./reducer.js里修改两个地方，同时把其他答案说的判断数组的去掉，因为你在reducer里面定义过初始值了，没必要判断

2.

Answer 2

(this.props.todos || []).map(() => {})
这样可以避免 undefined 或者 null 不能map的问题

Answer 3

{this.props.todos.map((todo, index) =>
                    <Todo {...todo}
                          key={index}
                         />
                )}

在调用map方法前要确认this.props.todos是数组，可以加个判断

this.props.todos&&Array.isArray(this.props.todos)&&this.props.todos.map(()=>{
})

Answer 4

你可以先看看this.props里有没有数据...

我翻了一下代码。。在哪个地方有获取初始数据？如果没有初始数据，你得给this.props.todo初始化成[]啊

Answer 5

这次错误的原因是

import { ADD_TODO, VisibilityFilters, SET_VISIBILITY_FILTER,  } from './actions'
import { combineReducers } from 'redux'

const { SHOW_ALL } = VisibilityFilters

/*

    let [foo, [[bar], baz]] = [1, [[2], 3]];
    foo // 1
    bar // 2
    baz // 3

    let [ , , third] = ["foo", "bar", "baz"];
    third // "baz"

    let [x, , y] = [1, 2, 3];
    x // 1
    y // 3

    let [head, ...tail] = [1, 2, 3, 4];
    head // 1
    tail // [2, 3, 4]

    let [x, y, ...z] = ['a'];
    x // "a"
    y // undefined
    z // []

*/

// SHOW_ALL = 'SHOW_ALL'

// 可见性过滤器 功能

// 实现增加命令 SHOW_ALL 仍为 'SHOW_ALL'
function visibilityFilter(state = SHOW_ALL, action) {
    switch (action.type) {
        case SET_VISIBILITY_FILTER:
            return action.filter
        default:
            return state
    }
}

没有给初始态，导致

{
    visibilityFilter: 'SHOW_ALL',
    visibleTodos: [
        {
        
        }
    ]
}

visibilityFilter的值未知

没有调用visibilityFilter方法

导致visibilityFilter的值未知