实例化失败，参数 bookTitle

Question

好的，我正在尝试使用 axios 将包含 2 个字符串对象的文件发送到我的 spring controller 我使用相同的变量名，所以我不知道为什么会出现此错误

"Failed to instantiate [com.onlinelibrary.bookservice.dto.messages.Messages$AddBookRequestMessage]: Constructor threw exception; nested exception is java.lang.NullPointerException: Parameter specified as non-null is null: method com.onlinelibrary.bookservice.dto .messages.Messages$AddBookRequestMessage.，参数 bookTitle"

const ManageBooksTab = () => {

const [book, setBook] = useState()
const [bookTitle, setBookTitle] = useState('')
const [bookDescription, setBookDescription] = useState('')
const [addDisabled, setAddDisabled] = useState(true)
const [deleteDisabled, setDeleteDisabled] = useState(true)



const handleBookAddSubmit = (e) => {
    e.preventDefault();

    console.log(book , bookTitle, bookDescription)

    const body = {
        bookTitle: bookTitle,
        bookDescription: bookDescription,
        bookFile: book
    }

    axios.post('http://localhost:8989/books/add', body, APIService.config).then(response => {
        console.log(response.data)
    }).catch((err) => {
        console.warn('error during http call adding book', err);
        console.warn('error during http call adding book Response: ', err.response);
    });
}

const handleBookDeleteSubmit = (e) => {
    e.preventDefault();

    axios.get(`http://localhost:8989/books/delete/${e.target.value}`, APIService.config).then( response => {
        console.log(response.data)
    }).catch((err) => {
        console.warn('error during http call deleting book', err);
        console.warn('error during http call deleting book Response: ', err.response);
    });
}

const handleFileChange = (e) => {
    setBook(e.target.value)
}

const handleDeleteSelection = (e) => {
    setDeleteDisabled(false)
}

const [books, setBooks] = useState([])

useEffect(e => {
    APIService.getAccessibleData()
        .then(response => {
            console.log(response.data)
            setBooks(response.data)
        }).catch(function (ex) {
        console.log('User Response parsing failed. Error: ', ex);
        console.log('User Response parsing failed. Error: Server Response', ex.response);
    });
}, [])

return (
    <>
        <Container className="col-5">
            <Form.Group controlId="formFileLg" className="mb-3">
                <Form.Label> <strong>Add Book</strong> </Form.Label>
                <br/>
                <Form.Label>Book Title</Form.Label>
                <Form.Control type="textfield" onChange={e => setBookTitle(e.target.value)} placeholder='Enter Title'/>
                <Form.Label>Book Description</Form.Label>
                <Form.Control type="textarea" onChange={e => setBookDescription(e.target.value)} placeholder='Enter Description'/>

                <Form.Label>Upload Book PDF</Form.Label>
                <Form.Control type="file" size="lg" onChange={e => {handleFileChange(e)}}/>
                <br/>
                <Button variant="primary" type="submit" onClick={(e) => handleBookAddSubmit(e)}>
                    Add Book
                </Button>
            </Form.Group>

            <hr/>
            <br/>
            <Form.Group controlId="formFileLg" className="mb-3">
                <Form.Label> <strong>Delete Book</strong> </Form.Label>
                <br/>
                <Form.Label>Select Book to delete</Form.Label>
                <Form.Control as="select">
                    {
                        books.map((bookIndex,index) => {
                            return (
                                <option value={bookIndex.id} key={index}>{bookIndex.bookTitle} : {bookIndex.id}</option>
                            )
                        })
                    }
                </Form.Control>
                <br/>
                <Button variant="primary" type="submit" onChange={e => handleDeleteSelection(e)} onClick={(e) => handleBookDeleteSubmit(e)}>
                    Delete Book
                </Button>
            </Form.Group>
        </Container>
    </>
)

}

这是我的 controller 方法

    @PostMapping("/add")
@Throws(UserException::class, AWSException::class, AccessException::class, BookException::class)
fun addBook(
    @ModelAttribute message: AddBookRequestMessage,
    bindingResult: BindingResult
): ResponseEntity<BookAddResponseMessage> {
    bindErrorResult(bindingResult)
    return ResponseEntity.ok(bookService.addBook(message))
}

以及我从我的反应客户端请求的数据 class

    data class AddBookRequestMessage(
    val bookTitle: String,
    val bookDescription: String,
    val bookFile: MultipartFile
)

我不知道我做错了什么有人可以帮我吗？ 请随时询问是否需要其他任何东西 PS我已经尝试了我的 controller 与 postman 中的表单数据及其工作正常我对反应有问题

Answer 1

嘿，我只是在这里以错误的方式加载文件

const handleFileChange = (e) => {
setBook(e.target.value)

}

它应该在哪里

const handleFileChange = (e) => {
    setBook(e.target.files[0])
}

还必须在表单数据中获取这样的数据

 const formData = new FormData()

    formData.append('bookTitle', bookTitle)
    formData.append('bookDescription', bookDescription)
    formData.append('bookFile', book)


    axios.post('http://localhost:8989/books/add', formData, APIService.config).then(response => {
        console.log(response.data)
    }).catch((err) => {
        console.warn('error during http call adding book', err);
        console.warn('error during http call adding book Response: ', err.response);
    });