我正在構建一個 MERN 應用程式，我想讓用戶通過單擊Edit 按鈕來編輯提示框中的食物名稱。
我正在按照此鏈接中的說明進行操作：[https://stackoverflow.com/questions/54993218/reactjs-using-alert-to-take-input-from-user]
問題是當我單擊Edit 按鈕并輸入提示然后單擊OK 時，它將第一次收到空值，但不會更新資料庫。
然后當我再次單擊Edit 按鈕時，沒有輸入任何內容，然后按OK，它將接收第一次輸入的值并將其更新到資料庫（如延遲）。
我想要的是：當單擊Edit 按鈕時，它會顯示提示框并從提示框中獲取值并在用戶單擊確定時更新到資料庫。
有什么辦法可以解決這個問題嗎？謝謝大家！
這是我的演示： gif
這是我的代碼：
function FoodListTable(props) {
/* Definition of handleClick in component */
const [newFoodName, setNewFoodName] = useState("")
const handleEdit = () => {
const enteredFood = prompt('Please enter your new food:')
setNewFoodName(enteredFood)
console.log(newFoodName)
if (newFoodName) {
Axios.put("https://mern-lefood.herokuapp.com/update", {
newFoodName: newFoodName,
id: props.val._id
})
}
}
return (
<button onClick={handleEdit}>Edit</button>
)
}
uj5u.com熱心網友回復：
React this.setState，并且useState不會直接更改狀態物件。
React this.setState，并React.useState為 React 核心創建佇列以更新 React 組件的狀態物件。
因此，出于性能原因，更新 React 狀態的程序是異步的。這就是為什么感覺變化并不立竿見影的原因。
試試下面的代碼吧！
function FoodListTable(props) {
/* Definition of handleClick in component */
const [newFoodName, setNewFoodName] = useState("");
const handleEdit = () => {
const enteredFood = prompt('Please enter your new food:');
setNewFoodName(enteredFood);
if (enteredFood) {
Axios.put("https://mern-lefood.herokuapp.com/update", {
newFoodName: enteredFood,
id: props.val._id
})
}
}
return (
<button onClick={handleEdit}>Edit</button>
)
}
更多詳情請點擊這里
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399025.html
標籤：javascript 反应 反应钩子 公理 迅速的