鑒于下面的狀態物件
{
colour: ['red', 'blue', 'green'],
size: ['small', 'medium', 'large'],
position: ['bottom', 'top', 'left', 'right'],
}
我需要能夠更改/更新其屬性值attrValues以及屬性鍵attrKey
我正在使用以下邏輯來做到這一點：
setAttributes((prevState) => {
const key = Object.keys(attributeToUpdate)[0];
if (key !== attrKey) {
delete prevState[key];
}
return { ...prevState, [attrKey]: attrValue };
});
如果我更改屬性鍵colour到color它的作業原理，但所產生的狀態變化：
{
size: ['small', 'medium', 'large'],
position: ['bottom', 'top', 'left', 'right'],
color: ['red', 'blue', 'green'],
}
將color屬性移到最后，我想將其保持在原始位置。
任何幫助或指示將不勝感激。
uj5u.com熱心網友回復：
盡管應該考慮到對密鑰插入順序/優先級的擔憂，但 OP 正在尋找的解決方案可能與下一個提供的代碼類似......
function renamePropertyAndKeepKeyPrecedence(obj, [oldKey, newKey]) {
const descriptors = Object.getOwnPropertyDescriptors(obj);
if (descriptors.hasOwnProperty(oldKey)) {
Object
.entries(descriptors)
.reduce((target, [key, descriptor]) => {
// delete every property.
Reflect.deleteProperty(target, key);
if (key === oldKey) {
// rename addressed key.
key = newKey;
}
// reassign every property.
Reflect.defineProperty(target, key, descriptor)
return target;
}, obj);
}
return obj;
}
const sample = {
position: ['bottom', 'top', 'left', 'right'],
colour: ['red', 'blue', 'green'],
size: ['small', 'medium', 'large'],
};
console.log('before property renaming ...', { sample });
renamePropertyAndKeepKeyPrecedence(sample, ['colour', 'color']);
console.log('after property renaming ...', { sample });.as-console-wrapper { min-height: 100%!important; top: 0; }uj5u.com熱心網友回復：
您無法控制物件中鍵的順序 - 如果順序很重要，您應該擁有一個物件陣列。然后你可以重建移除你想要的專案的狀態并替換它。
下面的演示在實踐中展示了這一點：
let prevState = [
{key:"colour",values: ['red', 'blue', 'green']},
{key:"size", values:['small', 'medium', 'large']},
{key:"position",values:['bottom', 'top', 'left', 'right']}
]
const indexToRemove = prevState.findIndex(x => x.key == "colour");
prevState = [
...prevState.slice(0,indexToRemove),
{key:"color", values:['red', 'blue', 'green']},
...prevState.slice(indexToRemove 1)
]
console.log(prevState)因此，如果我理解您的代碼，則更正將是
setAttributes((prevState) => {
const key = Object.keys(attributeToUpdate)[0];
const indexToRemove = prevState.findIndex(x => x.key == key);
return [
...prevState.slice(0,indexToRemove),
{key:attrKey, values:attrValue},
...prevState.slice(indexToRemove 1)
]
});
而且您必須更新其余代碼以使用狀態陣列而不是物件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/373223.html
標籤：javascript 反应 json 目的
上一篇：從條目創建嵌套物件
下一篇：檢測意外屬性