使用 ReactJs 和节点从 mongoDb 获取数据答案

【问题标题】：Fetch Data from mongoDb using ReactJs and node使用 ReactJs 和节点从 mongoDb 获取数据
【发布时间】：2021-11-05 17:54:19
【问题描述】：

我有一个 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特定数据

谢谢

【问题讨论】：

标签： node.js reactjs mongodb

【解决方案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/

【讨论】：