#reactjs #spring
#reactjs #весна
Вопрос:
У меня есть REST API в Spring Boot с JPA и Spring Security, мне удается загрузить файл и загрузить его успешно, но когда я пытаюсь удалить существующий пользовательский объект в своей базе данных по идентификатору, я получаю следующее сообщение об ошибке:
org.springframework.dao.EmptyResultDataAccessException: No class model.FileDB entity with id
undefined exists!
Я новичок в react / springboot и не могу найти точную ошибку, пожалуйста, ПОМОГИТЕ.
МОДЕЛЬ FileDB
@Entity
@Table(name = "files")
public class FileDB {
@Id
@GeneratedValue(generator = "uuid")
@GenericGenerator(name = "uuid", strategy = "uuid2")
private String id;
FileController.java
@DeleteMapping("/files/{id}")
public ResponseEntity<String> deleteFile(@PathVariable String id){
storageService.deleteFile(id);
return new ResponseEntity<>("file deleted", HttpStatus.OK);
}
FileService.java
public void deleteFile(String id) {
fileDBRepository.deleteById(id);
}
****** реагировать
export default class UploadFiles extends Component {
constructor(props) {
super(props);
this.selectFiles = this.selectFiles.bind(this);
this.upload = this.upload.bind(this);
this.uploadFiles = this.uploadFiles.bind(this);
this.state = {
selectedFiles: undefined,
progressInfos: [],
message: null,
fileInfos: [],
files:[]
};
}
componentDidMount() {
UploadService.getFiles().then((response) => {
this.setState({
fileInfos: response.data,
});
});
}
deleteFile=(fileId) =>{
axios.delete("http://localhost:8181/files/" fileId)
.then(response => {
if(response.data !=null){
this.setState({
files:this.state.files.filter(file => file.id !== fileId)
});
}
});
};
render()
{
//code
<Table bordered hover striped variant="dark" >
<thead>
<tr>
<th> List of Files </th>
<th> Actions</th>
</tr>
</thead>
<tbody>
{
fileInfos amp;amp;
fileInfos.map((file, id) =>
<tr key = {id}>
<td> <a href={file.url}>{file.name}</a> </td>
<td>
<ButtonGroup>
<Button onClick={this.deleteFile.bind(this,id)}
size="sm" variant="outline-danger">
<FontAwesomeIcon icon={faTrash} />
</Button>
{' '}
<Button size="sm" variant="outline-danger">
<FontAwesomeIcon icon={faEye} />
</Button>
</ButtonGroup>
</td>
</tr>
)
}
</tbody>
</Table>
}
Комментарии:
1. С вашим java-кодом все в порядке, вам следует взглянуть на
fileIdто, что вы передаете в качестве аргумента вdeleteFileвы получаете undefined при попытке доступаfile.idкonClickсобытию2. Спасибо за ваш ответ. Что вы предлагаете мне в качестве решения? по какому значению я могу изменить идентификатор в onClick
3. Я заменил onClick = {this . DeleteFile.bind (это, file.id ) с помощью onClick = {this . DeleteFile.bind (this, id), и я получаю ту же ошибку с небольшой разницей (не существует объекта класса с идентификатором 0!) вместо undefined у меня теперь 0.
Ответ №1:
Ваш Java code API работает правильно, я думаю, проблема в вашей стороне клиента, если ответ UploadService.getFiles() примерно такой:
{
....
data:[
{
"id": "afd564",
"name": "hello",
"link": "this the link"
}
]
....
}
export default class UploadFiles extends Component {
constructor(props) {
super(props);
this.selectFiles = this.selectFiles.bind(this);
this.upload = this.upload.bind(this);
this.uploadFiles = this.uploadFiles.bind(this);
this.state = {
selectedFiles: undefined,
progressInfos: [],
message: null,
fileInfos: [],
files:[]
};
}
componentDidMount() {
UploadService.getFiles().then((response) => {
this.setState({
fileInfos: response.data,
});
});
}
deleteFile=(fileId) =>{
axios.delete("http://localhost:8181/files/" fileId)
.then(response => {
if(response.data !=null){
this.setState({
files:this.state.files.filter(file => file.id !== fileId)
});
}
});
};
render()
{
//code
<Table bordered hover striped variant="dark" >
<thead>
<tr>
<th> List of Files </th>
<th> Actions</th>
</tr>
</thead>
<tbody>
{
fileInfos amp;amp;
fileInfos.map((file, id) =>
<tr key = {id}>
<td> <a href={file.url}>{file.name}</a> </td>
<td>
<ButtonGroup>
<Button onClick={this.deleteFile.bind(this,file.id)}
size="sm" variant="outline-danger">
<FontAwesomeIcon icon={faTrash} />
</Button>
{' '}
<Button size="sm" variant="outline-danger">
<FontAwesomeIcon icon={faEye} />
</Button>
</ButtonGroup>
</td>
</tr>
)
}
</tbody>
</Table>
}
Комментарии:
1. Спасибо за ваш ответ. Можете ли вы обобщить свой ответ для моего случая, который я тестировал, но он не работает…
2. Я только что более тщательно обновил ваш код. не могли бы вы попробовать?
3. Не могли бы вы пояснить мне, какие изменения вы внесли в код. Я заметил, что вы изменили только [onClick = {this . Удалить файл. bind (this, id)}], который я изменил ранее, с помощью [onClick = {this . DeleteFile.bind (это, file.id )] но это выдаст неопределенную ошибку, которую я получил в первый раз, прежде чем изменять ее.
4. Послушайте, ранее я говорил вам проверить, что fileInfos имеет правильную структуру, потому что внутренняя логика в порядке. Вам нужно проверить, какой ответ вы получаете,
response.dataпотому что этот ответ делает то, что ваш код не работает. когда вы помещаетеfileInfos.map((file, id)....это означает, что js выполняет итерацию объекта file, а идентификатор является индексом или позицией в массиве объекта, по этой причине вы теперь получаете ошибку 0, потому что вы нажимаете на первый элемент. выполните console.log(fileInfos) и проверьте, не пусто ли и структура