我有一個 mern 專案,我想在我的 reactjs 中從 mongodb 獲取資料。
我已經解決了幾個以前的問題,但沒有幫助!
我已經成功地獲取了所有資料
但我想獲取 olny 特定資料 ilke 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 key={index} className="blog-post__display">
<h3>{post.phone}</h3>
<p>{post.email}</p>
</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)}
<table>
<tr>
<th>email</th>
<th>phone</th>
</tr>
<tr>
<td>[email protected]</td>
<td>8340251638</td>
</tr>
<tr>
<td>[email protected]</td>
<td>78750251638</td>
</tr>
<tr>
<td>[email protected]</td>
<td>9652251638</td>
</tr>
</table>
</div>
</>
)
}
}
export default Admin;
我正在像這樣在瀏覽器中獲取資料---

我如何顯示 olny 特定資料
謝謝你
uj5u.com熱心網友回復:
因此,我將假設您有一個 Express 應用程式正在運行,并且您正在從這個給定/get-user端點的前端代碼中呼叫端點。端點回傳一個或多個用戶的所有用戶資料,具體取決于您的設定方式。為了獲得用戶的電子郵件串列,您需要一些東西來區分您對 Express 應用程式的 API 呼叫,您只需要用戶的電子郵件,而不是完整的用戶物件。有很多方法可以進行這種區分,但另一種方法可能是以某種方式堅持 REST 的最佳選擇。下面是一個可能的例子:
Express Endpoint
app.get('/users/email', (req, res) => {
Call MongoDB and filter the user list to just email for response
}
REACT Call
emails = () => {
axios.get('/users/email')
.then((response) => {
const data = response.data;
this.setState({ emails: data });
console.log(data);
})
.catch(() => {
alert('Error retrieving data!!!');
});
}
您應該在 Express 應用程式中過濾和排序資料,以便前端應用程式使用。否則,您可能會向前端發送過多資料或意外發送敏感資料。查看下面的鏈接以獲得更強大的示例。
https://codingthesmartway.com/the-mern-stack-tutorial-building-a-react-crud-application-from-start-to-finish-part-1/
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/350393.html
