时间戳

首页 > 解决方案 > 根据唯一和重复值更新对象数组内的数组

javascript - 根据唯一和重复值更新对象数组内的数组

问题描述

我有一个两个选择列表，我可以从中选择值

列出一个=“A”，“B”

列表二 = “C”、“D”、“E”、“F”

我有一个反应状态

const [filterTags, setFilterTags] = useState({ one: [], two: [] });

我可以一次从任何列表中传递一个 val，updateValue(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

如果不存在，它应该用唯一值更新相应的元素，如果现在存在，则删除这些值上面的代码可以只更新唯一值

标签： javascriptarraysobject

解决方案

您的代码不起作用的原因是您缺少filter()删除该值的 a 。您可以使用一个简单的辅助函数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)
  }));
};

现场演示

推荐阅读