我正在制作一个 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
任务板.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
}
};
这是因为‘map’函数只能用于数组,不能用于对象。
如果你在task-board.js的渲染函数中打印出this.props.tasks,你会发现它是一个包含任务数组的对象,而不是实际的任务数组本身。
所以要解决这个问题非常简单,而不是:
return this.props.tasks.map((task) => {
是
return this.props.tasks.tasks.map((task) => {
然后就可以了
根据您的减速机成分,您的
initialState
应该是:
const initialState = [
{
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"
}
]
如果您在获取数据之前尝试渲染,请检查服务器代码。如果是这样的话,redux/react 会抛出 .map 不是一个函数。
始终获取数据,使用中间件,然后尝试从服务器渲染客户端。
我在 redux 中遇到了同样的问题,问题是我试图在渲染客户端后获取数据
我也有类似的问题,这句话帮助了我:
“这是因为‘map’函数只能用于数组,不能用于对象。”
然后我在每个文件中console.log我的任务,看看它在哪里是一个obj而不是一个数组,结果发现我忘记在我的一个组件中破坏它:)
所以而不是
export default function TaskList( tasks ) {
return
//....
}
我需要
export default function TaskList( {tasks} ) {
return
//....
}