Блог

я учусь реагировать, поэтому я создал простое приложение для управления заметками с заголовком и описанием.

Я создаю функцию getNotes в Note.js файл и я передали функцию getNotes компоненту NoteForm и NoteList.

getNotes отлично работает в компоненте NoteForm, но не работает в компоненте NoteList. Функция getNotes() используется для обновления списка заметок. пожалуйста, скажите мне, почему функция getNotes() не работает в списке заметок

Note.js

     function Notes() {
  const [notes, setNotes] = useState([]);

   const getNotes = async () => {
    const notesRes = await axios.get("http://localhost:5000/notes/");   
    setNotes(notesRes.data);
    console.log(notes);
  }

  useEffect(() => {
    getNotes();
  }, []);

  return (
    <div>
      <NoteForm getNotes={getNotes} />
      <NoteList notes={notes} getNotes = {getNotes}/>
        
    </div>
  );
}

export default Notes;

 

Noteform.js

 function NoteForm({ getNotes }) {
  const [Title, setTitle] = useState("");
  const [description, setDesc] = useState("");
 
  async function saveNote(e) {
    e.preventDefault();

    try {
      const noteData = {
        title: Title,
        desc: description,
      };
      await axios.post("http://localhost:5000/notes/", noteData);
      getNotes();
      
      setTitle(''); setDesc('');
      
    } catch (err) {
      console.error(err);
    }
  }

  return (...);
}

export default NoteForm;

 

NoteList.js

 function NoteList({notes}, {getNotes}) {
  //------------Delete-----------
  async function delNote (id) {
    await axios.delete(`http://localhost:5000/notes/${id}`);
    getNotes();
    
  }

  //------------Update-----------

  const [open, setOpen] = React.useState(false);
  const [UpdateTitle, setUpdateTitle] = useState("");
  const [UpdateDescription, setUpdateDescription] = useState("");

  const handleClickOpen = (title, desc) => {
    setUpdateTitle(title);
    setUpdateDescription(desc);
    setOpen(true);
  };

  async function updateNote(id, updatetitle, updatedesc ) {
    const res = await axios.put("http://localhost:5000/notes/", {id, updatetitle, updatedesc});
    handleClose();
    getNotes();
         
  }

  const handleClose = () => {
    setOpen(false);
  };

  

  // ---------------------------

  function renderNotes() {
    return notes.map((note, i) => {
      return <div style={{ display:"inline-block",borderStyle: "ridge", padding:"20px", borderEndStartRadius: "50px", borderBlockEndColor:"yellowgreen", borderStartEndRadius:"50px", margin:"10px" }}
       
       key={i}> <b>Title: </b>  {note.title} <br/> 
       <b>Description: </b> {note.desc} <br/>
       
       <button onClick = {()=> delNote(note._id) } >Delete</button>
       <div>
      <Button variant="contained" style = {{ marginTop: "10px"  , padding: "0.5px"}} onClick={()=>handleClickOpen(note.title, note.desc)}>
      Edit
      </Button>

      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Update Your Note</DialogTitle>
        <DialogContent>
          {/* <DialogContentText>
            To subscribe to this website, please enter your email address here. We
            will send updates occasionally.
          </DialogContentText> */}
          <TextField
            autoFocus
            margin="dense"
            id="name"
            onChange={(e) => {
            setUpdateTitle(e.target.value);
          }}
            value = {UpdateTitle}
            label="Title"
            fullWidth
            variant="standard"
          />
          <TextField
            autoFocus
            margin="dense"
            id="name"
            onChange={(e) => {
            setUpdateDescription(e.target.value);
          }}
            value = {UpdateDescription}
            label="Description"
            type="email"
            fullWidth
            variant="standard"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={()=> updateNote(note._id, UpdateTitle, UpdateDescription )}>Update</Button>
        </DialogActions>
      </Dialog>
    </div>
      
      </div>;
      
    }).reverse();
  }

  return (
    <div>
      <div >
      {renderNotes()}
      </div>
    </div>
  );
}

export default NoteList;

 

 function NoteList({notes}, {getNotes}) {
 

это должно быть так

 function NoteList({notes, getNotes}) {
 

или

  function NoteList(props) {
   ...    
   props.getNotes()
 

Вы неправильно разрушаете NoteList реквизит компонента. измените его на,

 function NoteList({ notes, getNotes }) {