通過 PUT 方法更新 object

Question

我正在使用 MERN 堆棧創建待辦事項應用程序。 后端是 MongoDB 數據庫。 現在對於每個待辦事項，都有一個查看詳細信息按鈕，可以查看有關該特定待辦事項的更多信息。 單擊該按鈕后，架構 viewDetails 中就有此屬性，該屬性最初保持為 false，但一旦我單擊它，它應該使用 true 值更新數據庫並類似地切換。我可以在客戶端更改 object 值，但在后端，它仍然需要更新。 我想用那個特定的待辦事項 object 發起一個 PUT 調用並在數據庫中更新它。 下面給出了相同 function 的代碼： 這里的列表項中包含所有待辦事項對象。

const [listItems, setListItems] = useState([]);
<button onClick={()=>handleClick(item._id)}>View Details</button>

const handleClick=(id)=>{
    const newTasks = [...listItems];
    newTasks.map((task)=>{
      if(task._id===id){
        task.viewDetails=!task.viewDetails;
      }
    });
    setListItems(newTasks);
       }
    

Answer 1

您可以使用PUT方法更新數據庫中的 object。 您可以使用axios庫來發出PUT請求。

const handleClick = (id) => {
    const newTasks = [...listItems];
    newTasks.map((task) => {
        if (task._id === id) {
            task.viewDetails = !task.viewDetails;
        }
    });
    setListItems(newTasks);
    axios.put(`http://localhost:5000/api/todos/${id}`, newTasks)
        .then(res => {
            console.log(res);
            console.log(res.data);
        })
        .catch(err => {
            console.log(err);
        })
}