我是 React 的新手，剛剛開始在本地開發一個管理面板來練習我所學的知識，我遇到了這個問題，在搜索了很長時間后無法解決它，我離一步很近了關于小貓和無辜的孩子......
所以情況如下：
我有一個面板用于注冊一些產品，比如鞋子，在我的管理面板的儀表板頁面上，我列出了我的產品，我可以單擊其中任何一個上的編輯以重定向到編輯頁面并更改名稱、價格、影像等資訊等等
到目前為止，一切都按預期作業，問題是我有一個開關輸入，它指示它是否是特色產品，當我進入編輯頁面時，它會正確顯示它是打開還是關閉，現在當我點擊它時更改其狀態，第一次單擊時沒有任何反應，并且在第二次單擊后開始作業。
我已經完成了我的研究，并且知道它與使用 useEffect() 等有關，我已經相應地更改了我的代碼，現在真正的問題是當我登陸編輯頁面時開關關閉時，第一次點擊它作業得很好，它變成了開，我可以保存它，它會按預期作業，但是如果當我進入編輯頁面時默認情況下它是開的，第一次點擊將不起作用，它需要點擊 2 次和更多更改狀態，它使我無法理解它在關閉時的作業方式，而不是兩種方式。
ps 這是我第一次在這里提問，所以我可能沒有足夠清楚或正確地表達我的問題，所以我提前道歉。
這是代碼：
import {useEffect, useState} from "react";
import {useNavigate, useParams} from "react-router-dom";
import getOneProduct from "../../../Services/getOneProduct";
import {useProductsDispatch} from "../../../Context/productsContext";
import {toast} from "react-toastify";
function EditProductForm() {
const dispatch = useProductsDispatch()
const redirect = useNavigate()
const [product, setProduct] = useState({
name: '',
desc: '',
price: '',
offPrice: '',
image: '',
feat: null,
uid: '',
date: '',
})
const [switchVal, setSwitchVal] = useState(); // this is the state I use for the switch but would rather have it in the 'product' state above so they are all together
const switchHandler = (e) => { // the onChange function for the switch
const curVal = e.target.checked
setSwitchVal(curVal)
}
useEffect(() => { // the useEffect to reflect switch changes
setProduct({
...product,
feat: switchVal
})
console.log(switchVal)
}, [switchVal, setSwitchVal]);
const changeHandler = (e) => { // the input handler for all other inputs
setProduct({
...product,
[e.target.name]: e.target.value,
})
}
const editProductSubmit = (e) => { // form onSubmit
e.preventDefault()
dispatch({
type: 'EDIT_PRODUCT',
payload: {
productId,
product
}
})
redirect("/admin/dashboard")
}
const fetchedId = useParams()
const productId = fetchedId.id
useEffect(() => {
const fetchedProduct = async () => {
try {
const {data} = await getOneProduct(productId) // axios.get()
setProduct({
name: data.name,
desc: data.desc,
price: data.price,
offPrice: data.offPrice,
image: data.image,
feat: data.feat,
uid: data.uid,
date: data.date,
})
} catch (error) {
console.log(error)
}
}
fetchedProduct()
}, [productId])
return (
<div>
<form className="add-product-form" onSubmit={editProductSubmit}>
<div className="form-floating mb-3">
<input
defaultValue={product.name}
onChange={changeHandler}
type="text"
className="form-control"
id="productName"
name="name"
placeholder="??? ?????"
/>
<label className="form-label" htmlFor="productName">??? ?????</label>
</div>
<div className="form-floating mb-3">
<textarea
defaultValue={product.desc}
onChange={changeHandler}
className="form-control"
id="productDesc"
name="desc"
placeholder="Leave a comment here"
style={{height: 200}}
/>
<label htmlFor="productDesc">??????? ?????</label>
</div>
<div className="form-floating mb-3">
<input
defaultValue={product.price}
onChange={changeHandler}
type="number"
className="form-control"
id="productPrice"
name="price"
placeholder="???? ???? ?????"
/>
<label className="form-label" htmlFor="productPrice">???? ???? ?????</label>
</div>
<div className="form-floating mb-3">
<input
defaultValue={product.offPrice}
onChange={changeHandler}
type="number"
className="form-control"
id="productOffPrice"
name="offPrice"
placeholder="???? ?? ????? ?????"
/>
<label className="form-label" htmlFor="productOffPrice">???? ?? ????? ?????</label>
</div>
<div className="form-floating mb-3">
<input
defaultValue={product.image}
onChange={changeHandler}
type="text"
className="form-control"
id="productImage"
name="image"
placeholder="???? ????? ?????"
/>
<label className="form-label" htmlFor="productImage">???? ????? ?????</label>
</div>
<div className="form-check form-switch form-check-reverse mb-3">
<input
onChange={switchHandler}
defaultChecked={product.feat}
value={switchVal}
type="checkbox"
className="form-check-input"
id="productFeat"
role="switch"
/> {/* This is the switch in question */}
<label className="form-check-label" htmlFor="productFeat">????? ???? ???</label>
</div>
<div className="mb-3">
<button type="submit" className="btn btn-success">?????? ?????</button>
</div>
</form>
</div>
);
}
export default EditProductForm;
uj5u.com熱心網友回復：
我無法發表評論（因為 SO 需要一定的聲譽才能發表評論：/），所以我無法直接回答您在 Tim van Dam 的回答中留下的問題。但是，如果您想為反應組件設定條件默認值，您可能希望將該條件默認值作為道具傳遞，然后使用該值來初始化您的 useState()
uj5u.com熱心網友回復：
如果您設定它const [switchVal, setSwitchVal] = useState();，const [switchVal, setSwitchVal] = useState(false);它將具有 false 而不是 undefined 的起始值。假設在渲染時必須取消選中該框。true如果您需要它在渲染時為真，只需將其更改為。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/520576.html