洗掉專案后如何自動重新渲染反應組件？

我正在嘗試在我的應用程式中實作洗掉功能，但是當我單擊洗掉按鈕時，該專案確實被洗掉但頁面不會立即重新呈現。我仍然需要手動重繪 頁面才能看到更新的專案串列。有沒有辦法在我點擊洗掉按鈕后自動重新呈現頁面？這是我的代碼：

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;

uj5u.com熱心網友回復：

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;

uj5u.com熱心網友回復：

我以前沒見過useState接受回呼的二傳手。

您能否嘗試以這種方式更改您的洗掉處理程式：

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

uj5u.com熱心網友回復：

創建 forceRender 狀態以在 deleteItem 函式運行完成并決議時計數變化，將 forceRender 狀態傳遞給 useEffect 的依賴項，使其在 forceRender 狀態變化時再次獲取：

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;

標籤：反应 axios 使用效果

上一篇：如何從外部源獲取資料型別

下一篇：為什么我不能更改變數的值？