我有一個具有不同輸入的表單，它填充定義的下一個狀態，例如
const [userTaxData, setUserTaxData] = React.useState({
businessName: "",
rfc: "",
address: {
street: "",
number: 0,
suburb: "",
city: "",
state: "",
country: "",
zcode: 0
}
});
和 handleChange 函式定義為
const handleChange = (e) => {
setUserTaxData({
...userTaxData,
[e.target.name]: e.target.value
});
};
但是我面臨的問題是，當我嘗試更改“zcode”屬性時它不起作用，這是因為在“地址”物件內，所以我需要你的支持，因為我不知道如何訪問“地址”屬性。
uj5u.com熱心網友回復：
一種簡單的方法是測驗您是否在地址屬性中進行了更新：
const handleChange = (e) => {
if (Object.keys(userTaxData.address).includes(e.target.name)) {
setUserTaxData({
...userTaxData,
address: { ...userTaxData.address, [e.target.name]: e.target.value },
});
} else {
setUserTaxData({
...userTaxData,
[e.target.name]: e.target.value,
});
}
};
uj5u.com熱心網友回復：
我認為 zcode 是一個寡婦物件或原型 proto 寡婦物件上的一個方法
業務名稱.地址.zcode
uj5u.com熱心網友回復：
您無法使用字串鍵更新嵌套物件狀態，但是如果您將物件展平，則可以。
例子：
const flattenObject = (obj) => Object.assign({}, ... function _flatten(o) {
return [].concat(...Object.keys(o).map(k => typeof o[k] === 'object' ? _flatten(o[k]) : ({
[k]: o[k]
})))
}(obj))
const unflattenObject = (obj) => {
var result = {}
for (var i in data) {
var keys = i.split('.')
keys.reduce(function(r, e, j) {
return r[e] || (r[e] = isNaN(Number(keys[j 1])) ? (keys.length - 1 == j ? data[i] : {}) : [])
}, result)
}
return result
}
const handleChange = (e) => {
const flattened = flattenObject(userTaxData)
flattened[e.target.name] = e.target.value
const unflattened = unflattenObject(flattened)
setUserTaxData(unflattened);
};（取自此SO 帖子的扁平化代碼，取自此SO 帖子的非扁平化代碼）
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444599.html
標籤：javascript 反应
下一篇：排序陣列，里面有兩個物件