时间戳

首页 > 解决方案 > 如何停止对象数组中的重复数据输入

javascript - 如何停止对象数组中的重复数据输入

问题描述

我有一个名为validationValueIdValues 的数组，因此当用户单击输入状态时，即。validationIdValue 取单个输入框的值。现在一个用户选择是或否的选项。该函数创建一个 obj，其键名等于 state、validationIdValue 和值等于用户选择，简而言之，创建一个像这样的 obj

{08765d0f-2e7a-4fbd-9282-c38f5ddf8d8b: "NO"}

然后将此对象推送到 validationValueIdValues 变量。现在当用户选择同一个框并将选择值从 NO 更改为 YES 时会出现问题

  {08765d0f-2e7a-4fbd-9282-c38f5ddf8d8b: "YES"}

然后将该对象推送到validationValueIdValues 变量，而不检查是否存在与键相同的前一个obj，如果存在则从数组中删除该obj。我为此目的使用以下代码，但有些重复的 obj 仍然存在于数组中。

  var validationValueIdValues = []  //as global variable

  if (this.state.selectedOption === "YES") {
    const attribute = {};
    attribute[this.state.validationIdValue] = "YES";
    if (validationValueIdValues.length > 0) {
      validationValueIdValues.forEach((data, index) => {
        if (Object.keys(data) == this.state.validationIdValue) {
          validationValueIdValues.splice(index, 1);
            validationValueIdValues.push(attribute);
        }
      });
    } else {
      validationValueIdValues.push(attribute);
    }
  }

我使用了相同的 if 语句this.state.selectedOption === "NO"

标签： javascriptreactjs

解决方案

您将需要检查数组中的所有键以找到匹配的值。正如您所提到的，您不需要为“是”或“否”重复代码。像这样的东西足够通用来处理它

const validationValueIdValues = []  //as global variable


const addOrUpdateValidationValues = (newValidationValue) => {
    if(!newValidationValue) {
        return;
    }
    const keyOfNewValue = Object.keys(newValidationValue)[0]
    let added = false
    // loop through all values
    for(const validationValue of validationValueIdValues) {
        const keyOfCurrentValue = Object.keys(validationValue)[0]
        if(keyOfNewValue === keyOfCurrentValue) {
            // found that kind of key then just replace the value 
            added = true
            validationValue[keyOfCurrentValue] = newValidationValue[keyOfNewValue]
        }
    }
    // not added push
    if(!added) {
        validationValueIdValues.push(newValidationValue)
    }

}


// ...
// when you have the select or what ever event
// just call
addOrUpdateValidationValues(this.state.selectedOption)

推荐阅读