1

у меня есть страница с модальным окном, в котором я должен выбрать аудио файл и передать его в качестве аргумента в функцию. компилятор выдает такую ошибку

Argument of type 'File[]' is not assignable to parameter of type 'File'. Type 'File[]' is missing the following properties from type 'File': lastModified, name, size, type, and 3 more. TS2345

вот кот модального окна, ошибка возникает когда я пытаюсь передать input в функцию addSong()

 import React, { useState } from 'react'
import { Button, Modal } from 'react-bootstrap'



type AddSong = {
   addSong(file:File):void
}




export const AddSong: React.FC<AddSong> = ({addSong}) => {
    const [input, setInput] = useState<File[]>([])
    const [show, setShow] = useState(false);


    const handleClose = () => setShow(false);
    
    const handleShow = () => setShow(true);



    const handleChange = (e: any) => {
        setInput(e.target.files[0]);
        console.log(input)
    }


    const UploadFile = () => {
        addSong(input);
        
        setShow(false);

    }

    return (

        <>

            <svg onClick={handleShow} id="plus-icon" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" /></svg>

            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>Добавьте файл</Modal.Title>
                </Modal.Header>
                <div className="upload-icon">

                    <div className="urlContainer">
                        <input type="file" className="fileInput" onChange={handleChange} />

                    </div>
                </div>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
            </Button>
                    <Button variant="primary" onClick={UploadFile}>
                        Save Changes
            </Button>

                </Modal.Footer>
            </Modal>
        </>
    )
}

1 ответ 1

1

Вы указали тип File[]

const [input, setInput] = useState<File[]>([])

А пытаетесь положить File

setInput(e.target.files[0]);
5
  • То есть мне надо написать const [input, setInput] = useState<File>()?
    – Bad_m
    4 авг 2020 в 14:31
  • Если хотите хранить только один - useState<File>({}).
    – azlov
    4 авг 2020 в 14:33
  • Аргумент типа "{}" нельзя назначить параметру типа "File | (() => File)". Тип "{}" не может быть назначен для типа "() => File". Тип "{}" не предоставляет соответствия для сигнатуры "(): File". я совсем недавно начала изучать ts не думал, что будет столько проблем с файлами
    – Bad_m
    4 авг 2020 в 14:38
  • @Bad_m, попробуйте null
    – azlov
    4 авг 2020 в 14:39
  • Ошибка пропала только когда я поставил тип any, но функция addSong все странно работает и если я выберу файл то в input с первого раза ничего не записывается, но с этим я уже сам как нибудь буду разбираться
    – Bad_m
    4 авг 2020 в 15:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.