使用 useReducer 将属性添加到状态数组中的对象

Question

我有一组对象存储在如下状态：

    {
        "file": {},
        "myFsize": 1321,
        "fileType": "image/jpeg"
    },
{
        "file": {},
        "myFsize": 999,
        "fileType": "image/jpeg"
    }
]

我正在使用 useHookReducer 成功添加和删除对象

const [fileSelectedArrax, setfileSelectedArrax] = useReducer(fileSelectReducer, [])

但是我还想在每个对象上传时添加一个上传进度。它应该看起来像这样...

    {
        "file": {},
        "myFsize": 1321,
        "fileType": "image/jpeg",
        "percent": "90"
    },
{
        "file": {},
        "myFsize": 999,
        "fileType": "image/jpeg",
        "percent": "100"

    }
]

这是我的减速器：

function fileSelectReducer(state, action) {
   switch (action.type) {
      case 'add':
         console.log(state)
         return [...state, action.filex]
      case 'adduploadprogress':
         //WHAT HERE?
        return [...state]
      case 'remove':
         const update = [...state]
         update.splice(update.indexOf(action.file), 1)
         document.getElementById(fileattach).value = ''
         return update
      default:
         return state
    }
}

我调用它的函数是：

function adduploadprogress({ file, percent }) {
   const filex = { file, percent }
   console.log(filex)
   setfileSelectedArrax({ filex, type: 'adduploadprogress' })
}

我已尝试 for loops 和 ternerys 将状态中的对象与操作中传入的文件进行匹配，但似乎没有任何效果

Answer 1

您可以映射文件数组 (state)，并用包含新 percent:

的新对象替换当前文件的对象

case 'adduploadprogress':
  return state.map(f => f.file === action.filex.file ? ({ 
    ...f,
    percent: action.filex.percent,
  }) : f)

使用 useReducer 将属性添加到状态数组中的对象

add property to object in state array with useReducer

reactjs

react-hooks

use-reducer

使用 useReducer 将 属性 添加到状态数组中的对象

add property to object in state array with useReducer

reactjs

react-hooks

use-reducer

使用 useReducer 将属性添加到状态数组中的对象