Lấy dữ liệu từ mongodb trong phản ứng

Tôi đang cố lấy dữ liệu từ máy chủ để hiển thị một số bài viết. Trong khi Người đưa thư trả về mảng đối tượng và http. //máy chủ cục bộ. 5000/bài báo hiển thị tốt, khi tôi tìm nạp vào React thì màn hình trống và không có lỗi. Có một đoạn trích từ máy chủ. js

const express=require('express');
const bodyParser=require('body-parser');
const cookieParser=require('cookie-parser')
const cors=require('cors');
const app=express();

const db=require('./db');
const articleController=require('./controllers/article-controller');
const userController=require('./controllers/user-controller');
const postController=require('./controllers/post-controller');

app.use(cors());
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(cookieParser())

db.on('error', console.error.bind(console, 'MongoDB connection error'))

//get /articles
app.get('/articles',articleController.get)

app.use('/',userController)

app.listen(5000, ()=>
    console.log('Server started on port 5000')
);

Đây là ArticleService. js từ máy khách

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

Và bài báo. thành phần jsx

import React, {useState, useContext, useEffect} from 'react'
import {Navbar, Footer} from '../components'
import ArticleService from '../Services/ArticleService'
import {AuthContext} from '../Context/AuthContext'

const Articles=props=>{
//const [article, setArticle]=useState({title:"", content:""})
const [articles, setArticles]=useState([])
const authContext =useContext(AuthContext)

useEffect(()=>{
    ArticleService.getArticles()
        .then(data=>{
            setArticles(data.articles)
        })
},[])

return(
    

        
            Articles
        
        

        

            {
                articles && articles.map(article => {
                return(
                    

                    {article.title}
                    
{article.content}
                    
 
                )
                })
            }
        
        
    

)
}

export default Articles

Tôi cũng không nhận được bất kỳ lỗi nào trong bảng điều khiển. Chỉ là phản hồi với loại. "cors", trạng thái. 200 và ok. thật

Khi bạn đang làm việc trong ứng dụng ngăn xếp MERN (MongoDB, Express, React và Node), bạn thường được yêu cầu tìm nạp JSON của bộ sưu tập Mongo và sử dụng dữ liệu đó trên giao diện người dùng. Với sự phổ biến của cơ sở dữ liệu NoSQL, việc tìm nạp dữ liệu từ bộ sưu tập Mongo thông qua ứng dụng React thông qua máy chủ tốc hành thực sự đơn giản

Hướng dẫn này hướng dẫn bạn các yếu tố cần thiết để thực hiện yêu cầu XHR tới điểm cuối trên máy chủ cấp tốc để nhận JSON của bộ sưu tập Mongo trong cơ sở dữ liệu MongoDB của bạn

Thiết lập phụ trợ

Nếu bạn đã có máy chủ cấp tốc với điểm cuối nơi bạn có thể tìm nạp bộ sưu tập Mongo của mình, thì bạn có thể bỏ qua bước này. Nếu không, bạn có thể dễ dàng thiết lập máy chủ cấp tốc bằng NodeJS bằng các bước sau

Đầu tiên, tạo một dự án

1npm init -y 

1npm init -y 

vỏ bọc

Cài đặt mongoose, body-parser và express

1npm i mongoose express body-parser 

vỏ bọc

Tạo một lược đồ

Tạo lược đồ có tên

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

________số 8

jav

Tạo bộ điều khiển

Tạo bộ điều khiển để tìm nạp tất cả việc cần làm từ bộ sưu tập Mongo của bạn bằng phương thức

1npm i mongoose express body-parser 

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

jav

Thiết lập Bộ định tuyến tốc hành

Tạo phiên bản bộ định tuyến của express bằng cách gọi phương thức ______44 trên đó. Tiếp theo, tạo một tuyến đường sẽ đóng vai trò là điểm cuối API để nhận tất cả việc cần làm từ bộ sưu tập Mongo của bạn bằng cách gọi phương thức

1npm i mongoose express body-parser 

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

jav

Cuối cùng, kết hợp tất cả lại với nhau bằng cách tạo một ứng dụng cấp tốc và kết nối cơ sở dữ liệu MongoDB của bạn. Ví dụ này sử dụng MongoDB Atlas để tạo và kết nối với cơ sở dữ liệu đám mây bằng cách sử dụng chuỗi

1npm i mongoose express body-parser 

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

jav

Bây giờ bạn có thể truy cập bộ sưu tập mongo của mình bằng cách sử dụng điểm cuối http. //máy chủ cục bộ. 5000/todos sau khi chạy

1npm i mongoose express body-parser 

Tạo giao diện người dùng

Bộ sưu tập Mongo bạn sẽ sử dụng trông như thế này

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

json

Bộ sưu tập JSON này được trả về từ điểm cuối được tạo trong phần trước sau khi thêm dữ liệu vào cơ sở dữ liệu theo cách thủ công. Nếu bạn muốn sử dụng bộ sưu tập của mình, hãy sử dụng API được tạo trong phần trước hoặc sử dụng bộ sưu tập ở trên bên trong tệp văn bản cục bộ dưới dạng mô hình API. Phương pháp thực hiện yêu cầu XHR trong cả ba trường hợp đều giống nhau

Yêu cầu XHR

Bên trong ứng dụng React của bạn, nhập

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

1npm i mongoose express body-parser 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

import React, {useState, useContext, useEffect} from 'react'
import {Navbar, Footer} from '../components'
import ArticleService from '../Services/ArticleService'
import {AuthContext} from '../Context/AuthContext'

const Articles=props=>{
//const [article, setArticle]=useState({title:"", content:""})
const [articles, setArticles]=useState([])
const authContext =useContext(AuthContext)

useEffect(()=>{
    ArticleService.getArticles()
        .then(data=>{
            setArticles(data.articles)
        })
},[])

return(
    

        
            Articles
        
        

        

            {
                articles && articles.map(article => {
                return(
                    

                    {article.title}
                    
{article.content}
                    
 
                )
                })
            }
        
        
    

)
}

export default Articles

jsx

Bên trong hàm gọi lại của

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

1const mongoose=require('mongoose'); 
2 
3const todoSchema=mongoose.Schema({ 
4 name:{ 
5 type:String, 
6 required:true 
7 }, 
8 status:{ 
9 type:String, 
10 required:true 
11 } 
12},{timestamps:true}) 
13 
14const Todo=mongoose.model('Todo',todoSchema); 
15module.exports=Todo; 

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

1npm init -y 

jsx

Bây giờ bạn có thể xem việc cần làm từ bộ sưu tập Mongo của mình trên trang

Sự kết luận

Mặc dù tạo yêu cầu XHR là phương pháp nguyên thủy nhất để tạo yêu cầu AJAX, nhưng bạn phải luôn sử dụng các phương pháp hiện đại như API tìm nạp hoặc Axios để thực hiện lệnh gọi API. Chúng dễ sử dụng, có đường cong học tập nông và có thể xử lý nhiều yêu cầu cồng kềnh bằng cách sử dụng các tính năng nâng cao như chuỗi lời hứa. Ví dụ tương tự được sử dụng trong hướng dẫn này có thể được mã hóa theo cách gọn gàng hơn bằng cách sử dụng Axios hoặc API tìm nạp. Hãy thử điều đó như một bài tập

Làm cách nào để tìm nạp dữ liệu từ MongoDB React?

Làm cách nào để tìm nạp dữ liệu từ MongoDB?

Bạn có thể kết nối với MongoDB trong React không?

Làm cách nào để tìm nạp dữ liệu từ MongoDB bằng axios?