Добавить свойство к объекту в массиве состояний с помощью useReducer

У меня есть массив объектов, хранящихся в состоянии, которое выглядит так:

    {
        "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, чтобы сопоставить объект в состоянии с файлом, который передается в действии, но, похоже, ничего не работает

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
23
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сопоставить массив файлов (state) и заменить объект текущего файла новым объектом, который содержит новый percent:

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

Это прекрасно, большое спасибо. Куда мне поместить индекс ключа, чтобы на карте не отображалась ошибка?

Nick Wild 30.03.2021 22:48

Вы можете использовать файл как ключ. При рендеринге нужно добавить атрибут "ключ" - reactjs.org/docs/lists-and-keys.html

Ori Drori 31.03.2021 05:19

Спасибо.Я думал, что это обычная кет-ошибка по какой-то причине, но она была откуда-то еще. Еще раз спасибо

Nick Wild 31.03.2021 16:47

Пожалуйста :)

Ori Drori 31.03.2021 16:50

Другие вопросы по теме