React Redux Reducer:“this.props.tasks.map 不是函数"错误 [英] React Redux Reducer: 'this.props.tasks.map is not a function' error
问题描述
我正在制作一个 React Redux 示例；但是，我遇到了一个问题并收到以下错误:
<块引用>TypeError: this.props.tasks.map 不是函数[了解更多]
我尝试了很多东西，但似乎无法理解为什么这不起作用.我相信这是 allReducers 从 Tasks 函数映射任务的时候.我已经来回修复了这个错误，但它会抱怨它是未定义的.我会解决这个问题并回到这个问题.任何帮助，将不胜感激.我确定我犯了一个简单的错误.以下是我的以下文件
App.js
从'react'导入React；从../containers/task-board"导入任务板；require('../../scss/style.scss');const App = () =>(<div><h2>任务列表</h2><小时/><任务板/>);导出默认应用程序；
index.js
import {combineReducers} from 'redux';从'./reducer-tasks'导入{Tasks}；const allReducers = combineReducers({任务:任务});导出默认所有Reducerstask-board.js
import React, {Component} from 'react';从redux"导入{bindActionCreators}；从'react-redux'导入{connect}；从'../actions/ActionIndex'导入{deleteTaskAction}；从'../actions/ActionIndex'导入{editTaskAction}；类任务板扩展组件{渲染列表(){返回 this.props.tasks.map((task) => {if(task.status == "pending"){return ({task.id} {task.description}<button type="button">完成</button><button type="button">编辑</button><button onClick={() =>this.props.deleteTask(task)} type="button">Delete</button> );}});}使成为() {如果(！this.props.tasks){控制台日志(this.props.tasks)；return (<div>您当前没有任务，请先创建一个...</div>);}返回 (<div>{this.renderList()});}}函数 mapStateToProps(state) {返回 {任务:state.tasks};}函数 matchDispatchToProps(dispatch){返回 bindActionCreators({deleteTask: deleteTaskAction,编辑任务:编辑任务操作}， 派遣)}导出默认连接(mapStateToProps,matchDispatchToProps)(TaskBoard);
reducer-tasks.js
const initialState = {任务: [{编号:1，描述:这是一个任务"，状态:待定"},{编号:2，描述:这是另一个任务"，状态:待定"},{编号:3，描述:这是一项简单的任务"，状态:待定"}]}导出函数任务(状态 = 初始状态，动作){开关(动作.类型){案例ADD_TASK":返回 Object.assign({}, state, {任务: [...状态.任务，{描述:action.text，状态:action.status}]})休息;案例EDIT_TASK":返回 action.payload;休息;案例DELETE_TASK":返回 Object.assign({}, state, {状态:action.status})休息;}返回状态；}actionindex.js
export const addTaskAction = (task) =>{返回 {类型:'ADD_TASK'，text: "这是一个示例描述",状态:待定"}};export const deleteTaskAction = (task) =>{返回 {类型:'DELETE_TASK'，状态:已删除"}};export const editTaskAction = (task) =>{返回 {类型:'EDIT_TASK'，有效载荷:任务}};这是因为'map'函数只能用于数组，不能用于对象.
如果你在 task-board.js 的渲染函数中打印出 this.props.tasks，你会看到它是一个包含任务数组的 OBJECT，而不是实际的任务数组本身.
所以要解决这个问题很容易，而不是:
return this.props.tasks.map((task) => {这是
return this.props.tasks.tasks.map((task) => {然后就可以了
I am making a React Redux example; however, I ran into an issue and get the error below:
TypeError: this.props.tasks.map is not a function [Learn More]
I have tried many things and I cannot seem to understand why this is not working. I believe it is when the allReducers maps the tasks from the Tasks function. I have fixed this error back and forth but then it would complain it was undefined. I would fix that and loop back to this issue. Any help would be appreciated. Im sure I am making a simple mistake. Below are my following files
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
}
};
It's because the function 'map' can only be used for arrays, not for objects.
If you print out this.props.tasks in the render function of task-board.js you'll see that it's an OBJECT which contains the tasks array, not the actual tasks array itself.
So to fix this it's quite easy, instead of:
return this.props.tasks.map((task) => {
it's
return this.props.tasks.tasks.map((task) => {
Then it works
这篇关于React Redux Reducer:“this.props.tasks.map 不是函数"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
