时间戳

首页 > 解决方案 > Error React Redux Toolkit：为什么我不能使用 .findIndex 更改数组对象的键值

reactjs - Error React Redux Toolkit：为什么我不能使用 .findIndex 更改数组对象的键值

问题描述

我正在使用 React Redux Toolkit 创建一个简单的待办事项应用程序。如果用户单击复选框，它将更改 .isComplete 的键值。我使用 .findIndex 来查找特定任务的索引。但问题是我无法更改数组第一个对象的键值，而其余的都很好。

const initialState = [
  {
    _id: uuidv4(),
    title: 'Learn React',
    desc: 'Nec ullamcorper sit amet risus nullam eget felis.',
    isComplete: false,
    priority: 'Minor',
    created: 'johndoe',
    assigned: 'J Doe',
    dateCreated: new Date(),
    dateDue: new Date(),
  },
  {
    _id: uuidv4(),
    title: 'Learn Node JS',
    desc:
      'Risus nec feugiat in fermentum posuere urna. Est ante in nibh mauris cursus mattis molestie a. Malesuada pellentesque elit eget gravida cum.\n\nUt lectus arcu bibendum at varius vel pharetra vel.\n\nFacilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Rutrum tellus pellentesque eu tincidunt tortor. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.',
    isComplete: false,
    priority: 'High',
    created: 'johndoe',
    assigned: 'J Doe',
    dateCreated: new Date(),
    dateDue: new Date(),
  },  
];

JS
export const taskSlice = createSlice({
  name: 'tasks',
  initialState: initialState,
  reducers: {
    completeTodo: (state, action) => {
      const taskIndex = state.findIndex((e) => e._id === action.payload);
      if (taskIndex) {
        state[taskIndex].isComplete = true;
      }
    },
  },
});

标签： reactjsreduxredux-toolkit

解决方案

一般情况下，findIndex如果-1什么也没找到，0则为第一项。你会跳过它，if因为它是一个错误的值。

正确的大概是

      const taskIndex = state.findIndex((e) => e._id === action.payload);
      if (taskIndex !== -1) {
        state[taskIndex].isComplete = true;
      }

但你也可以

      const task = state.find((e) => e._id === action.payload);
      if (task) {
        task.isComplete = true;
      }

推荐阅读