我想确保我不能将重复的值以React状态推入数组。尽管重复的值仍在数组中。
我曾尝试使用，.includes但无法正常工作。
const categoryCheck = (category) => {
let categories = [...this.state.categories]
if (this.state.categories === undefined) {
return
}
console.log(categories, category)
console.log(!categories.includes(category))
if (!categories.includes(category) === false) {
categories.push(category)
console.log('new category', categories)
}
}
输入： 'cat'
预期结果：['cat']实际结果：['cat', 'cat']
更新：这是我的功能，这就是我的称呼方式。感谢您的所有帮助！
uniqueCategories = category => {
//makes sure that there are no duplicate categories in array
if (category === undefined) {
return;
}
let categories = new Set(category);
categories = Array.from(categories);
console.log(categories);
return categories;
};
我在这样的另一个函数中调用它：
this.setState({
categories: this.uniqueCategories([
...this.state.categories,
categoryInput
])
if (!categories.includes(category) === false) {
是双重否定的。删除=== false。
一种替代方法是使用aSet作为唯一性。通常，集合提供快速的查找时间并自动拒绝重复项，但是对于少量数据，性能可能并不比使用的数组好includes。
这是一个使用的玩具示例Set：
const {useState} = React;
const Example = () => {
const [categories, setCategories] = useState(new Set());
const [item, setItem] = useState("");
const addCategory = e => {
if (item.trim()) {
setCategories(new Set(categories).add(item.trim()));
}
};
return (
<div>
<input
onChange={e => setItem(e.target.value)}
value={item}
/>
<button onClick={addCategory}>Add Item</button>
<ul>{[...categories].map(e => <li key={e}>{e}</li>)}</ul>
</div>
);
};
ReactDOM.render(<Example />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.development.js"></script>还有一个includes例子：
const {useState} = React;
const Example = () => {
const [categories, setCategories] = useState([]);
const [item, setItem] = useState("");
const addCategory = e => {
const trimmed = item.trim();
if (trimmed && !categories.includes(trimmed)) {
setCategories(categories.concat(trimmed));
}
};
return (
<div>
<input
onChange={e => setItem(e.target.value)}
value={item}
/>
<button onClick={addCategory}>Add Item</button>
<ul>{categories.map(e => <li key={e}>{e}</li>)}</ul>
</div>
);
};
ReactDOM.render(<Example />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.development.js"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句