Блог

В настоящее время я пытаюсь отобразить содержимое своей базы данных в своих интерфейсных компонентах. Я использую стек MERN для создания приложения списка покупок, и пока у меня есть форма с событием onsubmit в моем интерфейсе, которая отправляет данные в MongoDB и сохраняет их. Я вижу, что я отправляю в свою базу данных без проблем.

Для отображения данных я создал внутренний маршрут, в котором я нахожу список в изображении внутреннего маршрута моей базы данных

затем я создаю api для этого внутреннего маршрута с помощью самого мягкого действия, которое я создаю getlist api action

Я пытаюсь вызвать его действие в моем интерфейсном компоненте, но все, что я вижу, это пустой массив в моей консоли, а не какой-либо заполненный список. В прошлом я вызывал api, затем устанавливал состояние всего, что мне нужно установить, и отображал его для его отображения. Дайте мне знать, если у вас, ребята, есть какие-либо идеи

компонент интерфейса для отображения списка

Обычно вы взаимодействуете со своим внутренним API, выполняя запрос через axios или fetch .

Если вы используете axios, создайте функцию и выполните post-запрос к вашему внутреннему маршруту внутри нее. Затем вызовите эту функцию внутри useEffect.

Если вы используете redux, просто вызовите действие внутри useEffect.

Редактировать: давайте предположим, что ваш сервер прослушивает порт 8000 для этого примера `

  const [groceryList, setGroceryList] = useState([]);

 async function fetchData() {
 const result = await axios.get(`/http://localhost:8000/getList`);
 setGroceryList(result);
  }

 useEffect(() => {
 fetchData()
 },[])
  

`

Все, что вам нужно сделать:

 
import {useEffect,useState } from "react";
 
//use it inside your function component in JS file and make sure your //server 3001 is runing by using express
function abcd(){

const [object, setObj] = useState([
    {
      title: "",
      description: "",
      url: "",
    },
  ]);

  useEffect(() => {
    fetch("http://localhost:3001/pages")
      .then((res) => res.json())
      .then((jsonRes) => setObj(jsonRes));
  }, []);


//Render

return(
 <div
        style={{
          display: "flex",
          flexDirection: "column",
          width: "20%",
          margin: "auto auto",
        }}
      >
        {object
          .sort((a, b) => {
            var titleA = a.title;
            var titleB = b.title;
            if (titleA < titleB) {
              return -1;
            }
            if (titleA > titleB) {
              return 1;
            }
            return 0;
          })
          .map((Ob) => {
            return (
              <img
                key={Ob.title}
                src={Ob.url}
                alt={Ob.description}
                name={Ob.title}
                onClick={handleClick}
              ></img>
            );
          })}
      </div>)
}

//Use the below code in your BackEnd in order to fetch all the data from the //MongoBackEnd(Express)
//Use your MongoDB server address and mongoSchema and store it in a //Variable("Handle")

const Handle = require("./views/mongoschema");

  app.get("/pages", (req, res) => {
      Handle.find({})
        .then((items) => res.json(items))
        .catch((err) => console.log(err));
    });
  

Выполняя описанные выше действия, вы можете извлечь все данные MongoDB из интерфейса и добавить к нему проекты или шаблоны.