ReactJS:如何防止 array.push 中的重复值?
ReactJS: How to prevent duplicate values in array.push?
同时在 Select 框中选择一个选项,此时其余选项将变为多个值。我怎样才能防止这种重复值?
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
/>
);
}
}
此语法中出现错误:
datas.map((name, index) => {
if (!dataOptions.includes(name)) {
dataOptions.push({ value: index, label: name });
}
});
控制台结果
[ "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:在推送后我已经从下拉列表中选择了第一个选项;所以结果如果不应该显示在数组值中。
提前致谢...!
destructuring
语法应该如下所示
datas.map(({name, index}) => {
if (!dataOptions.includes(name)) {
dataOptions.push({ value: index, label: name });
}
});
此外,默认情况下,您不需要外部数组将 map 函数中的数据推送为函数 returns 一个数组,您可以像下面这样简单地做
let expected_data=datas.map(({name, index}) => {
if (!dataOptions.includes(name)) {
return { value: index, label: name };// return a value
}
});
expected_data
里面会包含你运行后需要的数据
查看片段-
let data = [{
"name": 1,
"index": 2
}, {
"name": 11,
"index": 21
}]
console.log(data.map(({
index,
name
}) => {
return {
value: index,
label: name
}
}))
你最好使用 Array.some()
你正在寻找的东西
datas.map((name,index) => { // here index is the iterator
if(!dataOptions.some(({value,label})=>label==name ))
{
dataOptions.push({ value: index, label: name });
}
});
同时在 Select 框中选择一个选项,此时其余选项将变为多个值。我怎样才能防止这种重复值?
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
/>
);
}
}
此语法中出现错误:
datas.map((name, index) => {
if (!dataOptions.includes(name)) {
dataOptions.push({ value: index, label: name });
}
});
控制台结果
[ "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:在推送后我已经从下拉列表中选择了第一个选项;所以结果如果不应该显示在数组值中。
提前致谢...!
destructuring
语法应该如下所示
datas.map(({name, index}) => {
if (!dataOptions.includes(name)) {
dataOptions.push({ value: index, label: name });
}
});
此外,默认情况下,您不需要外部数组将 map 函数中的数据推送为函数 returns 一个数组,您可以像下面这样简单地做
let expected_data=datas.map(({name, index}) => {
if (!dataOptions.includes(name)) {
return { value: index, label: name };// return a value
}
});
expected_data
里面会包含你运行后需要的数据
查看片段-
let data = [{
"name": 1,
"index": 2
}, {
"name": 11,
"index": 21
}]
console.log(data.map(({
index,
name
}) => {
return {
value: index,
label: name
}
}))
你最好使用 Array.some()
你正在寻找的东西
datas.map((name,index) => { // here index is the iterator
if(!dataOptions.some(({value,label})=>label==name ))
{
dataOptions.push({ value: index, label: name });
}
});