使用 ReactJs 和節點從 mongoDb 獲取數據

Question

我有一個 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>rah098755@gmail.com</td>
              <td>8340251638</td>
            </tr>
            <tr>
              <td>kumar_rahulkkcs@yahoo.com</td>
              <td>78750251638</td>
            </tr>
            <tr>
              <td>anita@gmail.com</td>
              <td>9652251638</td>
            </tr>
          </table>
        </div>       
      </>
    )
  }
}


export default Admin;

我正在像這樣在瀏覽器中獲取數據---

我如何顯示 olny 特定數據

謝謝你

Answer 1

因此，我將假設您有一個 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/