我有兩個選擇串列，我可以從中選擇值
串列一=“A”，“B”
串列二 = "C", "D", "E", "F"
我有一個反應狀態
const [filterTags, setFilterTags] = useState({ one: [], two: [] });
我可以從任何串列中一次傳遞一個 valupdateValue(val)
我需要以這樣的方式更新 filterTags，如果它val來自串列one， A或者B它應該像這樣更新狀態
{first:["A"]: second:[]}，
如果我再次傳遞相同的值，它應該洗掉該值并更新它的檢查和取消檢查
如果它們不存在，下面的代碼可以添加新值，但如果它們存在，它什么都不做……如果它們存在，它應該洗掉該值
const updateValue = (val) => {
setFilterTags((prev) => {
const key = val === 'A' || val === 'B' ? 'first' : 'second';
return prev[key].includes(val)
? prev
: { ...prev, [key]: [...prev[key], val] };
});
};
少數用例是
如果我A C C D B A E C一一通過它應該用唯一值更新陣列，輸出應該是
{first:["A"]: second[]} //passing A
{first:["A"]: second["C"]} //passing C
{first:["A"]: second:[]} // same since C is already there it removes and update
{first:["A"]: second["D"]} //passing D
{first:["A","B"]: second:["D"]} //passing B
{first:["B"]: second:["D"]} //same since A is already present it removes "A" on passing A
{first:["B"]: second:["D","E"]} //passing E
{first:["B"]: second:["D","E","C"]}// final output on passing C
如果不存在，它應該用唯一值更新相應的元素，如果現在存在，則洗掉值上面的代碼可以只更新唯一值
uj5u.com熱心網友回復：
您的代碼不起作用的原因是您缺少filter()洗掉值的一個。您可以使用一個簡單的輔助函式toggleVal()來執行切換邏輯，包括filter()然后回傳更新的串列。
const oneVals = ["A", "B"];
const twoVals = ["C", "D", "E", "F"];
const [filterTags, setFilterTags] = useState({ one: [], two: [] });
const toggleVal = (possibleVals, list, value) => {
if (!possibleVals.includes(value)) {
return list;
}
return list.includes(value)
? list.filter(val => val !== value)
: [...list, value];
};
const updateValue = (value) => {
setFilterTags(({ one, two }) => ({
one: toggleVal(oneVals, one, value),
two: toggleVal(twoVals, two, value)
}));
};
現場演示
uj5u.com熱心網友回復：
我對您的代碼進行了一些更改 - 而不是使用在更復雜的情況下令人困惑的三元運算子，我選擇了 if 陳述句。
我清理了鍵選擇器。
從物件（秘密地）中洗掉值的方法是撰寫 delete ，然后是對要洗掉的鍵的參考。
const updateValue = (val) => {
setFilterTags((prev) => {
const key = ['A', 'B'].includes(val) ? 'first' : 'second';
if (prev[key].includes(val)) {
// clone the current key you are using because don't mutate state.
let prevClone = {
...prev[key]
}
// delete the desired key
delete prevClone[prevClone.indexOf(val)]
// return the whole state, with the mutation.
return {
...prev,
[key]: prevClone
}
} else {
// else just add it.
return {
...prev,
[key]: [...prev[key], val]
};
}
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336792.html
標籤：javascript 数组 目的
上一篇：用嵌套物件內的新鍵值對替換鍵值對
下一篇：如何替換物件內的所有事件？