Question

我正在尝试调用一个函数来在删除笔记时从数据库中获取数据。这样便可以更新笔记数组以反映已删除的笔记。发生错误的函数称为 deleteNote，而我试图在 .then 承诺中调用的函数是 getNotes。下面是我的 App.js 文件中的代码。如果有人能帮我解决这个问题，我将不胜感激。

import React, { useEffect, useState } from 'react';
import axios from 'axios';
// import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import './App.css';

const App = () => {

  const [note, setNote] = useState('');
  const [notesList, setNotesList] = useState([]);

  const getNotes = () => {
    axios.get('http://localhost:8080/api')
      .then((res) => setNotesList(res.data))
      .catch(() => alert('Error recieving data.'));
  }

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

  const handleChange = (event) => {
    const content = event.target.value;
    setNote(content);
  }

  const handleSubmission = (event) => {
    event.preventDefault();

    axios({
      url: 'http://localhost:8080/api/save',
      method: 'POST',
      data: {
        content: note
      }
    })
      .then((res) => {
        console.log('Created Note');
        setNote('');
        getNotes();
      })
      .catch(() => {
        console.log('Internal server error');
      })
  }

  const deleteNote = (event) => {
    const value = event.target.value;
    axios({
      method: 'DELETE',
      url: 'http://localhost:8080/api/delete',
      data: {
        _id: value
      }
    })
      .then(() => {
        console.log('Note Deleted');
        getNotes(); //Where the notes should be fetched upon successful deletion.
      })
      .catch(() => {
        alert('Error deleting note.');
      });
  }

  return (
    <div className="app">
      <h1>React Notes App</h1>
      <form onSubmit={handleSubmission}>
        <input
          type="text"
          placeholder="Enter note"
          value={note}
          onChange={handleChange}
        />
        <button className="submit-button">Submit</button>
      </form>
      <div className="notes-list">
        {notesList.map((note, index) => {
          return (
            <div className="note" key={index}>
              <p>{note.content}</p>
              <button value={note._id} className="delete-button" onClick={deleteNote}><i className="fas fa-trash-alt"></i></button>
            </div>

          );
        })}
      </div>
    </div>
  );
}

export default App;

Answer 1

我发现了这个问题。使用 axios 发送请求时，您必须从服务器发回响应才能执行承诺中可能包含的任何代码。

示例服务器代码：

app.delete('/delete', (req, res) => {
BlogPost.delete({_id: req.body.id}, (err) => {
if (err) {
console.log(err);
} else {
console.log('Successfully deleted blog post.')
res.json({ //Must include a response to execute code within the axios promise.
msg: 'Delete request was recieved.'
}); 
}
});
});

.then 承诺在反应应用程序中的 axios 删除请求中不起作用

1 个答案: