如何在reducer中的数组索引处添加对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在reducer中的数组索引处添加对象相关的知识，希望对你有一定的参考价值。
我有数组存储（store.calendar[0].todos[{title: title, etc...}]）
0: {todos: Array(0)}
1: {todos: Array(0)}
2: {todos: Array(0)}
3: {todos: Array(0)}
4: {todos: Array(0)}
我需要将操作对象添加到数组的索引待办事项：我已尝试使用此reducer，但是我收到错误：
state.calendar [newTodo.day] .concat不是函数
我的减速机：
let initialState = { calendar: []}
for (let i = 1; i <= 30; i++) {
initialState.calendar.push({ todos: []});
}
const todosReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
const newTodo = action.todoItem;
const newStore = {...state,
todos: state.calendar[newTodo.day].concat(newTodo)};
return newStore;
default:
return state
}
}
export default todosReducer;
我的行动：
export const addTodoAction = (todoItem) => {
return {
type: ADD_TODO,
todoItem
}
}
我的添加待办事项功能：
const handleSaveTodo = () => {
props.addTodo({
day: 5,
title: trackInput.value,
description: trackTextarea.value,
completed: false
});
}
答案
你需要以一种完全不可改变的方式改变你的状态。
为此，您必须复制日历数组，此日历中更新的日期以及要附加的待办事项列表。
首先得到day和todoItem，你可以使用解构：
const { todoItem } = action;
const { day } = todoItem;
然后复制您的日历，您可以使用传播语法：
const calendar = [...state.calendar];
然后使用当天的副本更新相关日期，并将新待办事项附加到待办事项列表：
calendar[day] = { ...calendar[day], todos: [...calendar[day].todos, todoItem] };
然后返回更新后的状态：
return { ...state, calendar };
这是一个例子：
const ADD_TODO = 'add-todo';
const initialState = { calendar: Array.from({ length: 30 }, (_, i) => ({ todos: [] })) };
const todosReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
const { todoItem } = action;
const { day } = todoItem;
const calendar = [...state.calendar];
calendar[day] = { ...calendar[day], todos: [...calendar[day].todos, todoItem] };
return { ...state, calendar };
default:
return state
}
}
let state = initialState;
state = todosReducer(state, { type: ADD_TODO, todoItem: { day: 0, title: 'todo day 1' } });
state = todosReducer(state, { type: ADD_TODO, todoItem: { day: 1, title: 'todo day 2' } });
state = todosReducer(state, { type: ADD_TODO, todoItem: { day: 2, title: 'todo day 3' } });
state = todosReducer(state, { type: ADD_TODO, todoItem: { day: 2, title: 'second todo day 3' } });
console.log(state.calendar.slice(0, 3));另一答案
试试state.calendar[newTodo.day].todo.concat(newTodo)吧。我想你正在尝试将.concat（）放到对象{todo：Array（0）}而不是其中的数组。
另一答案
你可以试试这个：
减速器：
const initialState = {
calendar: Array.from({length: 30}, () => ({ todos: [] }))
}
const todosReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
const { todoItem } = action;
const newCalendar = [...state.calendar];
newCalendar[todoItem].todos.push(todoItem);
return {
...state,
calendar: newCalendar
}
default:
return state
}
}
export default todosReducer;以上是关于如何在reducer中的数组索引处添加对象的主要内容，如果未能解决你的问题，请参考以下文章