получение данных mongodb с сервера express с использованием fetch на reactjs веб-интерфейсе - PullRequest
Новая
       37

получение данных mongodb с сервера express с использованием fetch на reactjs веб-интерфейсе

1 голос
/ 29 января 2020

Создание приложения заметок в стеке MERN https://lutif.github.io/Notes-Keeper/, у меня есть mongodb, я хочу получить заметки в базе данных, а затем отобразить их в веб-интерфейсе. Однако reactjs не позволяет мне инициализировать состояние (call useState) при обратном вызове. как это получить мои данные выборки и использовать его в useState. любой указатель будет полезен. 

import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

import addNotedb from '../APICalls/addNote';
import getNotesListdb from '../APICalls/getNotesList';


function App() {
getNotesListdb().then(nojson=>nojson.json()).then( notesListdb=>
  {const [notes, setNotes] = useState([...notesListdb]);}
)
  function addNote(newNote) {
    // const noteId = 
    addNotedb(newNote);
    console.log('calling add note with ', newNote);
    // newNote.Id = newNote;
    setNotes(prevNotes => {
      return [...prevNotes, newNote];
    });
    
  }

  function deleteNote(id) {
    setNotes(prevNotes => {
      return prevNotes.filter((noteItem, index) => {
        return index !== id;
      });
    });
  
  }

  return (
    <div>
      <Header />
      <CreateArea onAdd={addNote} />
      {notes.map((noteItem, index) => {
        return (
          <Note
            key={index}
            id={index}
            title={noteItem.title}
            content={noteItem.content}
            onDelete={deleteNote}
          />
        );
      })}
      <Footer />
    </div>
  );
}

export default App;

const endpoint = '/api/notes';
export default function getNotes() {
    
    let promise =
        fetch(endpoint, {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        }
    }
    )
    
    return promise
}
...