当在“选择”框中选择一个选项时,其余的选项将变为多个值。如何防止这种重复的值?
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:在推后,我已经从下拉列表中选择了第一个选项;因此,if不应该显示在数组值中。
提前谢谢.!
发布于 2019-11-11 11:30:27
destructuring语法应该如下所示
datas.map(({name, index}) => {
if (!dataOptions.includes(name)) {
dataOptions.push({ value: index, label: name });
}
}); 此外,您不需要外部数组来将数据推送到map函数中,因为函数默认返回数组,您可以简单地如下所示
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 });
}
}); https://stackoverflow.com/questions/58800392
复制相似问题