Как сделать валидацию для добавления изображений в useState?

Question

[Alexander]

Как я могу реализовать валидацию добавления изображений в useState?
Я сделал некую валидацию по добавлению изображений (максимум 4), но её легко обойти добавив сперва 3 или меньше изображений и потом еще какое-то количество, то есть она работает только когда пользователь выберет в первый раз больше 4 картинок, но сделав две попытки он эту валидацию сможет обойти. Буду благодарен за помощь

export interface ImageObj {
  blobUrl: string
  file: File
}
 const onSelectImage = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files) {
      const imgArray: Array<File> = Array.from(files)

      if (imgArray.length <= 4) {
        const newState = imgArray.map((file: File) => ({
          blobUrl: URL.createObjectURL(new Blob([file])),
          file,
        }))
        setImages((prev: ImageObj[]): Array<ImageObj> => [...prev, ...newState])
      } else {
        enqueueSnackbar('Max 4 photos.', {
          variant: 'info',
        })
      }
    }
  }, [])

Answer 1

[Егор Живагин]

if ((prev.length + imgArray.length) <= 4)

Comments

[Alexander]

Выдает ошибку Cannot read property 'length' of undefined,

const onSelectImage = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files) {
      const imgArray: Array<File> = Array.from(files)

      const newState = imgArray.map((file: File) => ({
        blobUrl: URL.createObjectURL(new Blob([file])),
        file,
      }))
      // setImages((prev: ImageObj[]): Array<ImageObj> => [...prev, ...newState])
      setImages((prev: ImageObj[]): any => {
        if (prev.length + imgArray.length <= 4) {
          return [...prev, ...newState]
        } else {
          enqueueSnackbar('Max 4 photos.', {
            variant: 'info',
          })
        }
      })
    }
  }, [])

[Егор Живагин]

Alexander, так, давайте разбираться тогда)
А что вообще такое setImages ?

[Alexander]

Егор Живагин,

const [images, setImages] = React.useState<ImageObj[]>([])

[Егор Живагин]

Alexander, понятно

if ((images.length + imgArray.length) <= 4)

[Alexander]

Егор Живагин, не работает к сожалению, я предполагаю что не в этом месте нужно делать условие

[Егор Живагин]

Alexander, а, в зависимости useCallback нужно ещё images добавить)