问需要有关React代码获取请求删除操作的帮助

EN

import React, {useState} from 'react';
import DeleteIcon from '@material-ui/icons/Delete';
import EditIcon from '@material-ui/icons/Edit';
import SaveIcon from '@material-ui/icons/Save';

function Note(props) {
  function handleClick() {
    props.onDelete(props.id);
  }

  const[edit, setEdit]=useState(false);

  function editTrue() {
    setEdit(!edit);
  }

  return(
    <div className={!edit ? "note" : "note1"}>
      <h1 contentEditable={edit && "true"} spellCheck="true">{props.title}</h1>
      <hr/>
      <p />
      <p contentEditable={edit && "true"} spellCheck="true">{props.content}</p>
      {!edit && <button onClick={handleClick}><DeleteIcon /></button>}
      {edit ? <button onClick={editTrue}> <SaveIcon /> </button> : <button onClick={editTrue}><EditIcon /></button>}
    </div>
  );
}

export default Note;

import React, { useState, useEffect } from 'react';
//import { DragDropContext } from 'react-beautiful-dnd';
import Header from './Header';
import Footer from './Footer';
import Note from './Note';
import CreateArea from './CreateArea'

function App() {

  const [notes, setNotes] = useState([]);

  useEffect(() => {
    fetch('https://react-hooks-update-ec587-default-rtdb.firebaseio.com/notes.json')
    .then(response => response.json())
    .then(responseData => {
      const loadedNotes = [];
      for( const key in responseData ) {
        loadedNotes.push({
          id: key,
          title: responseData[key].title,
          content: responseData[key].content
        });
      }
      setNotes(loadedNotes);
    });
  }, []);



  function addNote(newNote) {
    fetch('https://react-hooks-update-ec587-default-rtdb.firebaseio.com/notes.json', {
      method: 'POST',
      body: JSON.stringify(newNote),
      headers: { 'content-Type': 'application/json' }
    }).then(response => {
      return response.json();
    }).then(responseData => {
      setNotes(prevNotes => [
        ...prevNotes,
        { id: responseData.name, ...newNote }
      ]);
    });

  }

  function deleteNote(noteId) {
    fetch(`https://react-hooks-update-ec587-default-rtdb.firebaseio.com/notes/${noteId}.json`,
      {
        method: 'DELETE'
      }
    ).then(response => {
      setNotes(prevNotes => {
        return prevNotes.filter((noteItem, index) => {
          return index !== noteId;
        });
      });
    });

  }

  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;