Javascript 如果不匹配，则添加到react中的数组

我有两个数组，一个作为道具传入，称为“navPrimary”，另一个以状态存储，称为“dataArray”。我试图做的是循环遍历navPrimary数组，然后抓取标签，如果它不存在，只将其添加到“dataArray”中。到目前为止，它可以工作，但如果它存在或不存在，它将添加它。我知道我可以使用indexOf或filter来获得我需要的东西，但我不知道语法或包装技术来让它工作

const [dataArray, setDataArray] = useState([]);

setDataArray(dataArray.concat(navPrimary.map((item) => item.label)));

---

如果您不希望dataArray始终包含重复元素，则Set可以提供帮助：

setDataArray([...new Set(dataArray.concat(navPrimary.map((item) => item.label)))]);

---

如果您不希望dataArray始终包含重复元素，则Set可以提供帮助：

setDataArray([...new Set(dataArray.concat(navPrimary.map((item) => item.label)))]);

试试这个：

setDataArray(dataArray.concat(navPrimary.map((item) => item.label)).filter(label => !dataArray.includes(label)));

试试这个：

setDataArray(dataArray.concat(navPrimary.map((item) => item.label)).filter(label => !dataArray.includes(label)));

---

我将创建一个单独的钩子来处理这个通用逻辑，并更改存储数据的方式

// hooks.js
export const useUniqueElements = (data) => {
  const [dataSet, updateDataSet] = useState(new Set(data));
  
  const addElements = (newData) => {
    updateDataSet(new Set([
      ...dataSet,
      ...newData
    ]));
  }

  return {
    data: [...dataSet],
    addElements
  }
}

// helpers.js

export const getLabels = (data) => data.map(({label}) => label);

// MyComponent.js
const MyComponent = (initialList) => {
  const {addElements, data} = useUniqueElements(getLabels(initialList));

  const onSubmit = (newList) => {
    addElements(getLabels(newList));
  }

  // render stuff here
}

---

我将创建一个单独的钩子来处理这个通用逻辑，并更改存储数据的方式

// hooks.js
export const useUniqueElements = (data) => {
  const [dataSet, updateDataSet] = useState(new Set(data));
  
  const addElements = (newData) => {
    updateDataSet(new Set([
      ...dataSet,
      ...newData
    ]));
  }

  return {
    data: [...dataSet],
    addElements
  }
}

// helpers.js

export const getLabels = (data) => data.map(({label}) => label);

// MyComponent.js
const MyComponent = (initialList) => {
  const {addElements, data} = useUniqueElements(getLabels(initialList));

  const onSubmit = (newList) => {
    addElements(getLabels(newList));
  }

  // render stuff here
}