如何使用后端在reactjs中显示表中的数据

Question

我有一个MERN项目，

我正在从我的MongoDB数据库中获取数据，我想以表的形式在ReactJS中显示结果。我正在获取两个值phone和email，我想将表显示给它们。

我已经成功获取了我的数据，我只需要指导以表格的正确形式显示它们

Admin.js

import React from 'react';
import axios from 'axios';
class Admin extends React.Component {
state = {
phone: '',
email: '',
posts: []
};
// componentDidMount = () => {
//   this.getBlogPost();
// };
hello = () => {
axios.get('/getuser')
.then((response) => {
const data = response.data;
this.setState({ posts: data });
console.log(data);
})
.catch(() => {
alert('Error retrieving data!!!');
});
}
displayBlogPost = (posts) => {
if (!posts.length) return null;
return posts.map((post, index) => (
<div  className="blog-post__display">
<table class="table table-striped table-sm">
<tr>
<th>email</th>
<th>phone</th>
</tr>
<tr key={index}>
<td>{post.email}</td>
<td>{post.email}</td>
</tr>
</table>
</div>
));

};

render() {
return (
<>
<h1>
<button onClick={this.hello} class="btn btn-danger">click here to get data</button>
</h1>
<div className="blog-">
{this.displayBlogPost(this.state.posts)}

</div>       
</>
)
}
}

export default Admin;

Answer 1

所有开发人员都以不同的方式编写代码，但这是我的技巧。

import React, { Component } from 'react';
import axios from 'axios';
class Admin extends Component {
constructor() {
super(props);
this.state = {
posts: []
};
}
// LIFE CYCLE ALWAYS IN SIMPLE FUNCTION
// async componentDidMount() {
//   this.getBlogPost();
// };
hello = async () => {
try {
const { data } = await axios.get('/getuser');
this.setState({ posts: data });
console.log(data);
} catch(e) {
alert('Error retrieving data!!!', e);
}
}

render() {
return (
<>
<h1>
<button onClick={this.hello} class="btn btn-danger">click here to get data</button>
</h1>
<div className="blog-">
{this.state.posts.length && (
<div className="blog-post__display">
<table class="table table-striped table-sm">
<tr>
<th>email</th>
<th>phone</th>
</tr>
{this.state.posts.map((post, index) => (
<tr key={index}>
<td>{post.email}</td>
<td>{post.phone}</td>
</tr>
))}
</table>
</div>  
)}
</div>       
</>
)
}
}

export default Admin;