У меня есть две конечные точки http://localhost:8080/persons, чтобы получить всех людей и http://localhost:8080/persons/id, чтобы получить людей по id.Мне нужно создать страницу React с текстовым полем и кнопкой для поиска по идентификатору или всем, если текстовое поле пустое, и показать результаты в виде таблицы.Я очень новичок в React, и у меня есть следующий код, но он не работает, и я не уверен, почему, не могли бы вы мне помочь?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale-1">
<script src="http://www.jimsproch.com/react/future/react.js"></script>
<script src="http://www.jimsproch.com/react/future/react-dom.js"></script>
<script src="http://www.jimsproch.com/react/babel-browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class TableExp extends React.Component {
constructor () {
super();
this.state = {
tableData: [{
id: '',
name: '',
}],
personId: '',
};
}
handleChange = event => {
this.setState({ personId: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
axios.get(`http://localhost:8080/persons/${this.state.personId}`, {
responseType: 'json'
}).then(response => {
this.setState({ tableData: response.data });
});
}
render () {
const { tableData } = this.state.tableData;
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person ID:
<input type="text" name="id" onChange={this.handleChange} />
</label>
<button type="submit">Search</button>
</form>
<ReactTable.default
data={tableData}
columns={[
{
Header: 'Person',
columns: [
{
Header: 'ID',
accessor: 'id',
},
{
Header: 'Name',
accessor: 'name',
},
],
},
]}
defaultPageSize={10}
className="-striped -highlight"
/>
</div>
);
}
};
ReactDOM.render(<div><TableExp/></div>, document.getElementById("root"));
</script>
</body>
</html>
Редактировать: Сначала я показывал всем людям так же скоро, как и мнеоткройте страницу и все заработало:
class TableExp extends React.Component {
constructor () {
super();
this.state = {
tableData: [{
id: '',
name: '',
}],
};
}
componentDidMount () {
axios.get('http://localhost:8080/persons', {
responseType: 'json'
}).then(response => {
this.setState({ tableData: response.data });
});
}
render () {
const { tableData } = this.state;
return (<ReactTable.default
data={tableData}
columns={[
{
Header: 'Person',
columns: [
{
Header: 'ID',
accessor: 'id',
},
{
Header: 'Name',
accessor: 'name',
},
],
},
]}
defaultPageSize={10}
className="-striped -highlight"
/>
);
}
};
ReactDOM.render(<div><TableExp/></div>, document.getElementById("root"));class TableExp extends React.Component {
constructor () {
super();
this.state = {
tableData: [{
id: '',
name: '',
}],
};
}
componentDidMount () {
axios.get('http://localhost:8080/persons', {
responseType: 'json'
}).then(response => {
this.setState({ tableData: response.data });
});
}
render () {
const { tableData } = this.state;
return (<ReactTable.default
data={tableData}
columns={[
{
Header: 'Person',
columns: [
{
Header: 'ID',
accessor: 'id',
},
{
Header: 'Name',
accessor: 'name',
},
],
},
]}
defaultPageSize={10}
className="-striped -highlight"
/>
);
}
};
ReactDOM.render(<div><TableExp/></div>, document.getElementById("root"));
API в Spring Boot:
@RestController
@EnableAutoConfiguration
@ComponentScan("repository,factory")
@SpringBootApplication
public class PersonController {
private PersonRepository PersonRepository;
@Autowired
public PersonController(PersonRepository PersonRepository) {
this.PersonRepository = PersonRepository;
}
@CrossOrigin
@RequestMapping("/persons")
@ResponseBody
public List<Person> getPersons() {
return PersonRepository.getPersons();
}
@CrossOrigin
@RequestMapping("/persons/{id}")
@ResponseBody
public List<Person> getPerson(@PathVariable("id") Integer id) {
return PersonRepository.getPerson(id);
}
public static void main(String[] args) {
SpringApplication.run(PersonController.class, args);
}
}