删除项目时，如何自动重新反应组件？

Question

我正在尝试在我的应用中实现删除功能，但是当我单击删除按钮时，该项目确实会删除，但该页面并未立即启动。我仍然必须手动刷新页面才能查看更新的项目列表。有没有办法在我点击删除按钮后立即自动授予该页面？这是我的代码：

import React, {useState, useEffect, useRef} from 'react';
import Header from './Header';
import Footer from './Footer';
import Note from './Note';
import CreateArea from './CreateArea';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('http://localhost:4000/').then((response) => {
      setNotes(response.data);
    });
    console.log(notes);
  }, []);

  const deleteItem = (id) => {
    axios
      .delete('http://localhost:4000/delete/' + id)
      .then(() => {
        
        setNotes((previousValue) => {
          return previousValue.filter(({_id}) => {
            return _id !== id;
          });
        });
      });
  };

  return (
    <div>
      <Header />
      <CreateArea />

      {notes.map((item, index) => (
        <Note
          key={item._id}
          id={item._id}
          noteTitle={item.title}
          noteContent={item.content}
          onDelete={deleteItem}
        />
      ))}

      <Footer />
    </div>
  );
}

export default App;

Answer 1

import React, {useState, useEffect, useRef} from 'react';
import Header from './Header';
import Footer from './Footer';
import Note from './Note';
import CreateArea from './CreateArea';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('http://localhost:4000/').then((response) => {
      setNotes(response.data);
    });
    console.log(notes);
  }, []);

  const deleteItem = (id) => {
    axios
      .delete('http://localhost:4000/delete/' + id)
      .then(() => {
        setNotes(previousValue.filter(_id =>_id !== id));
        
      });
  };

  return (
    <div>
      <Header />
      <CreateArea />

      {Notes.map((item, index) => (
        <Note
          key={item._id}
          id={item._id}
          noteTitle={item.title}
          noteContent={item.content}
          onDelete={deleteItem}
        />
      ))}

      <Footer />
    </div>
  );
}

export default App;

Answer 2

我从未见过usestate之前接听回调的设置。

您能以这种方式更改删除处理程序：

const deleteItem = (id) => {
    axios
      .delete('http://localhost:4000/delete/' + id)
      .then(() => {
        
        setNotes(notes.filter(({_id}) => {
            return _id !== id;
          }));
      });
  };

Answer 3

当DeleteItem运行完整和解决时，创建前面状态以计数更改，将前孔状态传递给使用效率的依赖项，在前官态更改时再次获取：

import React, {useState, useEffect, useRef} from 'react';
    import Header from './Header';
    import Footer from './Footer';
    import Note from './Note';
    import CreateArea from './CreateArea';
    import axios from 'axios';
    
    function App() {
      const [notes, setNotes] = useState([]);
      const [forceRender, setForceRender] = useState(0); // <=== Create new forceRender state
      
    
      useEffect(() => {
        axios.get('http://localhost:4000/').then((response) => {
          setNotes(response.data);
        });
        console.log(notes);
      }, [forceRender]); // <=== pass forceRender state to dependencies
    
      const deleteItem = (id) => {
        axios
          .delete('http://localhost:4000/delete/' + id)
          .then(() => setForceRender(prev => prev + 1)); // <==== set state change if deleteItem() complete
      };
    
      return (
        <div>
          <Header />
          <CreateArea />
    
          {notes.map((item, index) => (
            <Note
              key={item._id}
              id={item._id}
              noteTitle={item.title}
              noteContent={item.content}
              onDelete={deleteItem}
            />
          ))}
    
          <Footer />
        </div>
      );
    }
    
    export default App;