我的資料形狀如下： [{size: ["large", "medium"]}, {color: ["red", "green"]}]
表格頁面：
const optionSubmit = (e) => {
const name = e.target.name;
const storeValue = { [name]: productValue };
addData(storeValue);
};
formContext 頁：
const addData= (newData) => {
setData(() => [...data, newData]);
}
問題是當我更改大小物件示例時，其顯示如下： [ {size: ["large", "medium"]}, {color: ["red", "green"]}, {size: ["large", “中”、“小”]} ]
我希望這個陣列變成這樣：
[{color: ["red", "green"]},{size: ["large", "medium", small]}]
uj5u.com熱心網友回復：
您正在獲取現有物件并將其擴展到一個新陣列中，然后也將其添加newData到該新陣列中。這就是您看到這種行為的原因。
相反，您可以通過幾種方式來做到這一點，但使用Object.assign是這樣的：
const addData= (newData) => {
setData(() => Object.assign({}, data, newData};
}
或者，如果您newData是一個僅包含的物件，{size: []}那么您可以這樣做：
const addData= (newData) => {
setData(() => {...data, ...newData};
}
uj5u.com熱心網友回復：
const myArr = [
{size: ["large", "medium"]},
{color: ["red", "green"]},
{size: ["large", "medium", "small"]}
];
const result = [];
myArr.forEach(e=>{
const key = Object.keys(e)[0];
const i = result.findIndex(r=>Object.keys(r)[0]==key);
if(i>=0){
result[i]= {...result[i],...e};
}else{
result.push(e)
}
})
console.log(result)uj5u.com熱心網友回復：
不是使用陣列，而是使用物件，它會覆寫屬性。
const [data, setData] = useState({});
const addData = (newData) => {
setData({ ...data, newData });
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/383566.html
標籤：javascript 反应