useReducer 复制添加的元素

Question

为什么添加了两个元素而不是一个？

对于如此简短的描述，我深表歉意，但我不知道还能添加什么

Answer 1

我解决了您的问题...但是请参阅 ask question 部分。

问题在这里

function reducer(state, action) {
  switch (action.type) {
    case "push":
      state.arr.push(action.payload);
      return { arr: state.arr };
    default:
  }
}

应该是这样的，这是利用spread operator的典型reducer流程。

   function reducer(state, action) {
      switch (action.type) {
        case "push":
          return {
            ...state,
            // spread the numbers 0, 1, 2, 3, && action.paylod appends the number/item to the array
            arr: [...state.arr, action.payload] // pass the action payload 
          }
        default:
      }
    }

工作演示

https://codesandbox.io/embed/useredux-duplicates-the-added-elements-forked-grznpc?fontsize=14&hidenavigation=1&theme=dark

useReducer 复制添加的元素

useReducer duplicates the added elements

reactjs

use-reducer