我正在嘗試在 React 中創建一些自定義錯誤驗證
我有一個狀態值 obj 和狀態錯誤 obj 共享相同的鍵
const [values, setValues] = useState({
name: "",
age: "",
city: ""
});
const [err, setErr] = useState({
name: "",
age: "",
city: ""
});
我有一個非常簡單的句柄更改和一個 onSubmit，我想在其中運行我的自定義驗證器函式
const handleChange = (e) => {
setValues({
...values,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e) => {
e.preventDefault();
validateForms();
};
在我的 validateForms 函式中，我的理論是因為我的兩個狀態共享相同的鍵，我試圖查看這些值中是否有任何一個 === '' if yes match 是 err obj 中的相同鍵，并將相應的值設定為錯誤然后在 JSX 中做其他事情
const validateForms = () => {
for (const value in values) {
if (values[value] === "") {
setErr({
...err,
value: `${value} is a required field`
});
}
}
};
我絕對覺得我在這里沒有正確使用 setErr 。任何幫助都會很可愛。沙箱鏈接：https : //codesandbox.io/s/trusting-bartik-6cbdb? file =/ src/App.js: 467-680
uj5u.com熱心網友回復：
你有兩個問題。首先，您的錯誤物件鍵需要是[value]而不是 string value。其次，您將要在狀態設定器中使用回呼函式，這樣就不會傳播舊版本的錯誤物件：
const validateForms = () => {
for (const value in values) {
if (values[value] === "") {
setErr(err => ({
...err,
[value]: `${value} is a required field`
}));
}
}
};
設定錯誤的更直觀的方法可能是將它們全部累加并只設定一次錯誤狀態：
const validateForms = () => {
const errors = {};
for (const value in values) {
errors[value] = values[value] === "" ? `${value} is a required field` : "";
}
setErr(errors);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363685.html