реагирует: массив "содержит" метод

Question

У меня есть компонент класса реакции, который имеет в своем состоянии объект параметра типа «учетные данные»:

{пользователь: '', пароль: ''}.

Я добавляю новые «учетные данные» в массив «credentialList» также в состоянии и вывожу его. Я пытаюсь заставить программу выдавать ошибку, когда я пытаюсь ввести новые «учетные данные» с пользователем, который уже существует в списке. Я дал каждому «мандату» значение ключа, равное пользователю. К сожалению, это не сработало. Я пометил проблемный оператор 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>
    )
}

}

Answer 1

Я думаю, что метод, который вы ищете, включает

Это позволит сравнить весь объект с указанным в параметрах. Например:

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

Если вы хотите сравнить конкретные значения, тогда метод some соответствующий

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

Answer 2

Нет метода contains, но вы можете использовать some()

Вот пример:

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

Приведенный выше код проверяет, имеет ли какой-либо из объектов в массиве credentialsList те же значения свойств user и password, что и у объекта credential. Вы можете изменить условие if, если не хотите проверять оба эти свойства.