使用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)