useReducer调度执行两次

Question

我不明白为什么会发生这种情况。由于在react中启用了严格模式，因此此函数将执行两次。因此，它不是删除一个项目，而是删除两个项目，一个在第一轮，第二个在下一轮。

const deleteItem = (state, index) => {
    // index is a number
       
    let indexCounter = 0;
    let tempArray = [...state.todos];
    const newTodos = tempArray.filter(item => {
        if (item.index === index) {
            return false;
        }
        item.index = indexCounter++;
        return true;
    });
    return {
        ...state,
        todos: newTodos,
        nextIndex: indexCounter
    };   
}

但是，如果我使用Set而不是基元数据类型(数字(，这很好。即只有一个项目将被删除，即使调度被调用两次。

const deleteItem = (state, set) => {
    const newSet = new Set(set);
    
    let indexCounter = 0;
    let tempArray = [...state.todos];
    const newTodos = tempArray.filter(item => {
        if (newSet.has(item.index)) {
            newSet.delete(item.index);
            return false;
        }
        item.index = indexCounter++;
        return true;
    });
    return {
        ...state,
        todos: newTodos,
        nextIndex: indexCounter
    };
    
}

我是不是遗漏了什么？到底发生了什么？

Answer 1

您正在改变影响下一个操作的状态。

// Is a shallow copy
let tempArray = [...state.todos];
const newTodos = tempArray.filter((item) => {
  if (item.index === index) {
    return false;
  }
  // State mutation
  item.index = indexCounter++;
  return true;
});

相反，您需要进行深度复制或使用Redux文档中提到的不可变更新模式。

Answer 2

我已经更新了代码。它现在运行良好。希望它是正确的。

const deleteItem = (state, index) => {
    let indexCounter = 0;
    const tempArray = state.todos.filter(item => {
        return index !== item.index;
    });
    const newTodos = [];
    tempArray.forEach((item) => {
        newTodos.push({...item, index: indexCounter++});
    })
    return {
        ...state,
        todos: newTodos,
        nextIndex: indexCounter
    };
    
}