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 将属性添加到状态数组中的对象

1 个答案: