React Redux Reducer：'this.props.tasks.map不是函数'错误

Question

我正在做一个React Redux的例子；但是，我遇到了一个问题，并出现以下错误：

TypeError：this.props.tasks.map不是函数[了解更多]

我已经尝试了很多事情，但似乎无法理解为什么它不起作用。我相信是allReducers从Tasks函数映射任务的时候。我已经来回修复了此错误，但随后它会抱怨它是未定义的。我将解决此问题并循环回到此问题。任何帮助，将不胜感激。我确定我犯了一个简单的错误。以下是我的以下文件

App.js

import React from 'react';

import TaskBoard from "../containers/task-board";

require('../../scss/style.scss');



const App = () => (

    <div>

        <h2>Task List</h2>

        <hr />

        <TaskBoard/>

    </div>

);



export default App;

index.js

    import {combineReducers} from 'redux';

    import {Tasks} from './reducer-tasks';

    const allReducers = combineReducers({

        tasks: Tasks

    });



    export default allReducers

task-board.js

    import React, {Component} from 'react';

    import {bindActionCreators} from 'redux';

    import {connect} from 'react-redux';

    import {deleteTaskAction} from '../actions/ActionIndex';

    import {editTaskAction} from '../actions/ActionIndex';

    class TaskBoard extends Component {

        renderList() {

            return this.props.tasks.map((task) => {

                if(task.status == "pending"){

                    return (<li key={task.id}>

                        {task.id} {task.description}

                        <button type="button">Finish</button>

                        <button type="button">Edit</button>

                        <button onClick={() => this.props.deleteTask(task)} type="button">Delete</button>

                    </li>

                );

            }

        });

    }

    render() {

        if (!this.props.tasks) {

            console.log(this.props.tasks);

            return (<div>You currently have no tasks, please first create one...</div>);

        }

        return (

            <div>

                {this.renderList()}

            </div>

        );

    }

}

    function mapStateToProps(state) {

        return {

            tasks: state.tasks

        };

    }

    function matchDispatchToProps(dispatch){

        return bindActionCreators(

        {

            deleteTask: deleteTaskAction,

            editTask: editTaskAction

        }, dispatch)

    }

    export default connect(mapStateToProps,matchDispatchToProps)(TaskBoard);

reducer-tasks.js

const initialState = {

    tasks: [

        {

            id: 1,

            description: "This is a task",

            status: "pending"

        },

        {

            id: 2,

            description: "This is another task",

            status: "pending"

        },

        {

            id: 3,

            description: "This is an easy task",

            status: "pending"



        }

    ]

}



export function Tasks (state = initialState, action) {

    switch (action.type) {

        case 'ADD_TASK':

            return Object.assign({}, state, {

                tasks: [

                    ...state.tasks,

                    {

                        description: action.text,

                        status: action.status

                    }

                ]

            })

            break;



        case 'EDIT_TASK':

            return action.payload;

            break;



        case 'DELETE_TASK':

            return Object.assign({}, state, {

                status: action.status

            })

            break;

    }



    return state;

}

actionindex.js

    export const addTaskAction = (task) => {

        return {

            type: 'ADD_TASK',

            text: "Here is a sample description",

            status: "pending"

        }

    };

    export const deleteTaskAction = (task) => {

        return {

            type: 'DELETE_TASK',

            status: "deleted"

        }

    };

    export const editTaskAction = (task) => {

        return {

            type: 'EDIT_TASK',

            payload: task

        }

    };

Answer 1

这是因为函数“ map”只能用于数组，而不能用于对象。

如果在task-
board.js的render函数中打印出this.props.tasks，您会发现它是一个包含task数组的对象，而不是实际的task数组本身。

因此解决此问题非常容易，而不是：

    return this.props.tasks.map((task) => {

它的

    return this.props.tasks.tasks.map((task) => {

然后就可以了