在添加到反应状态之前检查数组中的重复项答案

【问题标题】：Check for duplicate in array before adding to react state在添加到反应状态之前检查数组中的重复项
【发布时间】：2022-08-19 03:40:42
【问题描述】：

我有一个类型为 select 的 customInput，它的 onChange 正在运行一个 setState。

我的状态对象看起来像这样

const [upload, setUpload] = useState({
    uploadType: \'files\',
    selectHeader: [],
    defaultFields: [
      {
        baseField: \'First name\',
      },
      {
        baseField: \'Last name\',
      },
      {
        baseField: \'Phone number\',
      },
      {
        baseField: \'Company\',
      },
      {
        baseField: \'Email\',
      },
    ] 
  });

当 onChange 运行时，我成功地将一个新对象添加到 selectHeader 数组中

{value: firstName, index: 1}

问题是，当用户为索引 1（或任何索引）处的标头选择新值时，我想检查此数组中是否存在重复项。

我不确定如何使用 setState 内联执行此操作，并且似乎无法在此示例中找到一个好的线程

这是下面选择类型的 CustomInput

<thead>
        <tr>
          {
            fileContacts.map((contact) => (
                <th scope=\"col\" key={fileContacts.indexOf(contact)}>
        <WizardInput // this is just a fancy CustomInput at its core
        type=\"select\"
        defaultValue={\"Do not Import\"}
        tag={CustomInput}
        name=\"selectHeader\"
        id=\"selectHeader\"
        onChange={({ target }) => {
          setUpload({...upload, selectHeader: [...upload.selectHeader, {value: target.value, index:fileContacts.indexOf(contact)}]})
          // this is adding a duplicate object if the user changes the header value twice.
        }}
        innerRef={register}
        errors={errors}
        options={[\'First Name\', \'Last name\', \'Phone\', \'Email\']}
      />
            </th>  
            ))}
        </tr>
      </thead>

标签： javascript reactjs

【解决方案1】：

为 selectheader 创建一个新变量并过滤该数组以查找任何重复项（有关任何帮助，请查看此问题How to remove all duplicates from an array of objects?），然后将其传递给 setUpload

【讨论】：

【解决方案2】：

也许您可以在添加新的之前过滤掉前一个。

setUpload({...upload, selectHeader: [...upload.selectHeader.filter(({value}) => value != target.value), { value: target.value, index:fileContacts.indexOf(contact) }] })

【讨论】：

【解决方案3】：

尝试使用functional updates：

setUpload((upload)=>{

    if(upload.selectHeader.some(h => h.value == target.value)) return upload

    return {
        ...upload,
        selectHeader: [
            ...upload.selectHeader, 
            {
                value: target.value,
                index:fileContacts.indexOf(contact)
            }
        ]
    }
})

【讨论】：

【解决方案4】：

例子： const [arr, setArr] = React.useState([1,2,1,6,4,3,3,1]);

function rerange() {
    setArr(old => old.filter(elem => old.indexOf(elem) == old.lastIndexOf(elem)))
// Sort in ascending order

setArr(sort => sort.sort((a,b) => a-b)) }

【讨论】：