Question

目前我正在学习Redux，玩弄不同的东西。所以我制作了一个简单的TODO应用程序，可以编辑每个TODO项目。

但由于某种原因，UPDATE_TODO reducer将更新的TODO项目放在列表和列表中。因此该项目已成功更新，但它会跳到TODO列表的末尾，而不是保留在原始位置。

原创TODO项目定位：

第1项＆lt; - 正在更新
第2项
第3项

更新第1项后的定位：

第2项
第3项
第1项＆lt; - 已更新

在我的reducer中，我使用filter（）过滤除了更新的所有TODO，然后为更新的TODO项设置新状态。

需要建议如何正确更新TODO项目状态以使其保持原始位置？

减速器

import { UPDATE_TODO } from '../constants';

const initialState = {
  all: [] // array of all TODO's
}

export default function(state = initialState, action) {
  switch (action.type) {
    ...
    case UPDATE_TODO:
      return {
        ...state,
        all: [
          ...state.all.filter(todo => todo.id !== action.payload.id),
          action.payload
        ]
      };
    default:
      return state;
  }
}

Answer 1

因为您将更新的项目action.payload放在最后一个：

all: [
    ...state.all.filter(todo => todo.id !== action.payload.id),
    action.payload
]

此处filter将返回除更新项目以外的所有待办事项，然后返回所有项目action.payload（更新后的项目）。

而不是使用map并设置条件，当todo.id == action.payload.id为true时，则返回更新后的条件，否则返回现有项目。

像这样：

case UPDATE_TODO:
    return {
        ...state,
        all: [
            ...state.all.map(todo => {
                if(todo.id == action.payload.id)
                    return action.payload;
                return todo;
            })              
        ]
};

reducer更新状态

1 个答案: