Javascript 反应：数组“；包括「；方法

我有一个react类组件，其状态中有一个类型为“credentials”的参数对象：

{用户：''，密码：'}

我向状态中的“credentialList”数组添加新的“credentialList”，并将其输出。我试图使程序在我尝试与列表中已存在的用户一起输入新的“凭据”时出错。我给每个“凭证”一个等于user的键值。不幸的是，这并没有奏效。我在****中标记了有问题的if语句。谢谢你的帮助。我的代码：

state = {
    user: '',
    password: '',
    clicked: false,
    credentialsList: []
}

userChangedHandler = (event) => {
    this.setState( { user: event.target.value })
}

passwordChangedHandler = (event) => {
    this.setState( { password: event.target.value })
}

userSubmitHandler = () => {
    if(this.state.user === '' || this.state.password === ''){
        alert('Please enter username and password!');
    }
    const credential = {user: this.state.user , password: this.state.password};
    **if(this.state.credentialsList.length !== 0 && this.state.credentialsList.contains(credential)){
        alert('Enter New')
    }**
    else {
        let newList = [...this.state.credentialsList, {user: this.state.user, password: this.state.password }];
        this.setState({clicked: true, user: '', password: '', credentialsList: newList})
    }
}

formEraseHandler = () => {
    if(this.state.credentialsList.length === 0){
        alert('The User List is Empty!')
    }
    else {
        let newList = [];
        this.setState({ credentialsList: newList, user:'', password:''});
    }
}

render() {
    return(
     <div>
        <Form
            credentialsList={this.state.credentialsList}
            user={this.state.user}
            password={this.state.password}
            clicked={this.state.clicked}
            userChanged={(event) => this.userChangedHandler(event)}
            passwordChanged={(event) => this.passwordChangedHandler(event)}
            addButtonClicked={this.userSubmitHandler}
            resetButtonClicked={this.formEraseHandler}/>
        <CredentialsList credentials={this.state.credentialsList}/>
     </div>
    )
}

状态={
用户：“”，
密码：“”，
点击：错，
证书列表：[]
}
userChangedHandler=（事件）=>{
this.setState（{user:event.target.value}）
}
passwordChangedHandler=（事件）=>{
this.setState（{密码：event.target.value}）
}
userSubmitHandler=（）=>{
if（this.state.user==''| | this.state.password===''）{
警报（'请输入用户名和密码！'）；
}
const credential={user:this.state.user，密码：this.state.password}；
**if（this.state.credentialsList.length！==0&&this.state.credentialsList.contains（凭证））{
警报（'输入新'）
}**
否则{
让newList=[…this.state.credentialsList，{user:this.state.user，password:this.state.password}]；
this.setState（{单击：true，用户：“”，密码：“”，凭证列表：newList}）
}
}
Form橡皮擦处理程序=（）=>{
if（this.state.credentialsList.length==0）{
警报（'用户列表为空！'）
}
否则{
让newList=[]；
this.setState（{credentialsList:newList，用户：“”，密码：“”}）；
}
}
render（）{
返回(
this.userChangedHandler（事件）}
passwordChanged={（事件）=>this.passwordChangedHandler（事件）}
addButtonClicked={this.userSubmitHandler}
resetButtonClicked={this.formEraseHandler}/>
)
}

---

}没有

包含
方法，但您可以使用

以下是一个例子：

const exists = this.state.credentialsList.some(v => (v.user === credential.user && v.password === credential.password));

上面的代码检查
credentialsList
数组中的任何对象是否具有与
credential
对象相同的
user
和
password
属性值。如果不想同时检查这两个属性，可以修改
if
条件。
我认为您正在寻找的方法是

这将把整个对象与params中给定的对象进行比较。例如：

const credentials = [{ username: 'foo', password: 'bar' }];
credentials.includes({ username: 'foo, password: 'bar' }); // true
credentials.includes({ username: 'foo, password: 'foobar' }); // false

如果要比较特定的值，则该方法更为有效
适当的

credentials.some(cred => cred.username === this.state.username); // true

您不能将对象与简单的==进行比较，该==包含将要执行的操作。尝试使用Array.find或simiair。