У меня есть массив объектов, хранящихся в состоянии, которое выглядит так:
{
"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.info(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.info(filex)
setfileSelectedArrax({ filex, type: 'adduploadprogress' })
}
Я пробовал for loops
и ternerys, чтобы сопоставить объект в состоянии с файлом, который передается в действии, но, похоже, ничего не работает
Вы можете сопоставить массив файлов (state
) и заменить объект текущего файла новым объектом, который содержит новый percent
:
case 'adduploadprogress':
return state.map(f => f.file === action.filex.file ? ({
...f,
percent: action.filex.percent,
}) : f)
Вы можете использовать файл как ключ. При рендеринге нужно добавить атрибут "ключ" - reactjs.org/docs/lists-and-keys.html
Спасибо.Я думал, что это обычная кет-ошибка по какой-то причине, но она была откуда-то еще. Еще раз спасибо
Пожалуйста :)
Это прекрасно, большое спасибо. Куда мне поместить индекс ключа, чтобы на карте не отображалась ошибка?