首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ReactJS:如何防止array.push中的重复值?

ReactJS:如何防止array.push中的重复值?
EN

Stack Overflow用户
提问于 2019-11-11 11:23:09
回答 1查看 9.3K关注 0票数 0

当在“选择”框中选择一个选项时,其余的选项将变为多个值。如何防止这种重复的值?

代码语言:javascript
运行
复制
import Select from 'react-select';
const dataOptions = []; 
class App extends React.Component {
    constructor(props) {
        super(props);
        this.data = [];
        this.getData();
    }
    getData = () => { api.request({url: `/getdata`}).then(res => res.map(el => this.data[el.id] = el.name)) }

    addData = () => {
        const { selectedId } = this.state;
        var datas = this.data;
        console.log(datas);
        datas.map((name, index) => {
            if (!dataOptions.includes(name)) {
                console.log('b4 push:', dataOptions)
                dataOptions.push({ value: index, label: name });
                console.log('aftr push:', dataOptions)
            }
        });
        return (
            <Select options={dataOptions}
            isMulti
            />
        );
    }
}

在这种语法中发生了一些错误:

代码语言:javascript
运行
复制
datas.map((name, index) => {
  if (!dataOptions.includes(name)) {
       dataOptions.push({ value: index, label: name });
  }
}); 

控制台结果

代码语言:javascript
运行
复制
[ "data-1", "data-2", "data-3"]

b4 push: [
  {value: 1, label: "data-1"}
  {value: 2, label: "data-2"}
  {value: 3, label: "data-3"}
]

aftr push: [
  {value: 1, label: "data-1"}
  {value: 2, label: "data-2"}
  {value: 3, label: "data-3"}
]

P.S:在推后,我已经从下拉列表中选择了第一个选项;因此,if不应该显示在数组值中。

提前谢谢.!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-11 11:30:27

destructuring语法应该如下所示

代码语言:javascript
运行
复制
datas.map(({name, index}) => {
      if (!dataOptions.includes(name)) {
           dataOptions.push({ value: index, label: name });
      }
    }); 

此外,您不需要外部数组来将数据推送到map函数中,因为函数默认返回数组,您可以简单地如下所示

代码语言:javascript
运行
复制
 let expected_data=datas.map(({name, index}) => {
              if (!dataOptions.includes(name)) {
                 return  { value: index, label: name };// return a value
              }
            }); 

expected_data将包含操作后所需的数据。

看到片段了-

代码语言:javascript
运行
复制
let data = [{
  "name": 1,
  "index": 2
}, {
  "name": 11,
  "index": 21
}]

console.log(data.map(({
  index,
  name
}) => {

  return {
    value: index,
    label: name
  }

}))

你最好用Array.some()来做你想要的东西

代码语言:javascript
运行
复制
 datas.map((name,index) => { // here index is the iterator
                if(!dataOptions.some(({value,label})=>label==name  ))
            {
                   dataOptions.push({ value: index, label: name });
              }
            }); 
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58800392

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档