如何讓React在對資料庫進行POST或DELETE操作后，從API重新獲取我的資料？

剛開始接觸 react，希望能得到任何幫助，讓我的組件在 POST 或 DELETE 后重新呈現資料。在發布和洗掉時，資料一直流向我的資料庫，但我必須手動重新加載頁面以獲得更新的資料

DELETE - State [data,setData] being flowing all the way through my database on post & delete.

DELETE - State [data,setData] being passed in from useFetch custom hook

function BookList（{ data, isPending, setData }） {
 

    if (isPending){
        return <p>Data Loading! </p> 
    }
   

    const handleDelete =（book_id）=> {
        fetch(`http://localhost:3000/books/${book_id}`, {
            method: 'DELETE'。
        })
        .then(response => response.json()
        .then(()=> {
            const updatedBooks = data.data. filter(item => item.book_id !==book_id)
            setData(upedBooks)
           
        })

    }
   
  const rows = data.data. map(({book_id, book_title, author}, index) =>/span> (
    <tr> 
        <td>{book_id}。
        </td>{book_id}
        <td>{book_title}</td>/span>
        <td>{author}</td> 
        <button onClick={（）=>  handleDelete(book_id)}>洗掉</按鈕>/span>

    
    </tr>/span>
  ))

  return (
    <div>)
      <table>/span>
        <thead> 
          <tr>/span>
            <th>/span>Id</th>
            <th>Title</th>/span>
            <th>作者</th>/span>
            <th>Delete</th>
          </tr>/span>
        </thead>/span>
        <tbody>{rows}。
        </tbody>{rows}。
      </table>/span>
    </div> 
  );
}

export default BookList;

和POST

import { useState } from "react"。

function NewBook({data, setData}) {
  const initialFormState = {
    book_title。"",
    author: ""const [formData, setFormData] = useState({ ... initialFormState })。

  const handleChange = ({ target }) => {
    setFormData({ ...formData, [target.name]: target.value }) 。
  };

  const handleSubmit=（event）=> {
    event.preventDefault（）。
    const newBook = formData;
    console.log（newBook）。
    const url = "http://localhost:3000/books"。
    const requestOptions = {
      method: "POST"。
      headers: { "Content-Type": "application/json" }。
      body: JSON.stringify（newBook）。
    };
    fetch(url, requestOptions)
      .then((response) =>  console. log("提交成功")
      .then(()=> {setData.push（formData）})
      .catch((error) =>  console. log("Form submit error", error))。

    setFormData({ ... initialFormState })。
   
  };

uj5u.com熱心網友回復：

考慮使用全域狀態管理，如上面的答案所示。我建議使用 react 的背景關系 API，因為它對初學者很友好，對于這樣一個小專案來說，它將為你提供良好的服務。Context API docs

你的背景關系提供者檔案可以是這樣的：

確保在App.js中引入你的背景關系，并像這樣將其包裹在你的組件中

return (
    <BooksContextProvier> 
        <NewBook />
        <BookList />>
    </BooksContextProvier>
)

在NewBook中，從背景關系中帶入bookList和setBookList函式，這樣無論你在組件中做什么改變，都會在全域中反映出來。因此，在handleSubmit的結尾處不要再呼叫setFormData，而是要設定BookList，并包括新書。因此，你的NewBook組件的代碼將是這樣的

 function NewBook（） {
    const initialFormState = {
      book_title。""。
      author: ""const [formData, setFormData] = useState({ ... initialFormState })。
    const {bookList, setBookList} = useBooks()
  
    const handleChange = ({ target }) => {
      setFormData({ ...formData, [target.name]: target.value }) 。
    };
  
    const handleSubmit=（event）=> {
      event.preventDefault（）。
      const newBook = formData;
      console.log（newBook）。
      const url = "http://localhost:3000/books"。
      const requestOptions = {
        method: "POST"。
        headers: { "Content-Type": "application/json" }。
        body: JSON.stringify（newBook）。
      };
      fetch(url, requestOptions)
        .then((response) =>  console. log("提交成功")
        .catch((error) => console. log("Form submit error", error))。
  
      setBookList([formData, ...bookList])
     
    };

對于你的BookList組件，你可以結合以下代碼來利用背景關系

function BookList（） {
    const {bookList, setBookList} = useBooks()
 
    if (loading){
        return <p>Data Loading! </p> 
    }
   

    const handleDelete =（book_id）=> {
        fetch(`http://localhost:3000/books/${book_id}`, {
            method: 'DELETE'。
        })
        .then(response => response.json()
        .then(()=> {
            const updatedBooks = data.data. filter(item => item.book_id !==book_id)
            setBookList(upedBooks)
        })

    }

你也可以在全域層面上修改和利用加載狀態，我沒有把它包含在示例代碼中，但你可以把它拉到你的組件中，并以處理bookList的方式來操作它。

uj5u.com熱心網友回復：

我認為您應該使用狀態管理工具，例如react redux或provider，以便在應用程式中全面訪問全域狀態。我個人更喜歡provider。然而，redux有其自身優勢。在選擇了您的狀態管理方法后，您可以定義一個函式，以便在用戶在特定頁面或等進行互動時呼叫API。

uj5u.com熱心網友回復：

有許多方法來管理狀態，并根據需要。你需要選擇你需要的東西。我將從最簡單的方式開始管理你的情況，

1.

1. 提升狀態