3
React Reduxの例を作成しています。しかし、私が問題に遭遇したと下のエラーが表示されます。React Reduxリダクター： 'this.props.tasks.mapは関数ではありません'エラー
TypeError: this.props.tasks.map is not a function [Learn More]
私は多くのことを試してみましたし、私はこれが動作しない理由を理解するように見えることはできません。私はそれが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ですタスク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);減速-tasks.js
const initialState = {
\t 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"
}
\t ]
}
export function Tasks (state = initialState, action) {
switch (action.type) {
case 'ADD_TASK':
return Object.assign({}, state, {
\t tasks: [
\t \t ...state.tasks,
\t \t {
\t \t \t description: action.text,
\t \t \t status: action.status
\t \t }
\t ]
})
break;
case 'EDIT_TASK':
return action.payload;
break;
case 'DELETE_TASK':
return Object.assign({}, state, {
\t 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
}
};
ありがとうございます。変数を印刷して、マップしようとする前にそのオブジェクトまたは配列が表示されているかどうかを確認します。きちんとしたトリックをありがとう。また、delete_taskでは "保留中"のステータスが "deleted"に変更されるようにどのように返されますか？ – Potion
状態の「ステータス」を保留中から削除済みに更新する方法は？ – Jayce444
はいそうです。 – Potion