Блог

Я новичок в react и работаю над приложением, которое может управлять контактом, и у меня возникает эта ошибка в любое время, когда я хочу добавить к нему контакт. Вот как выглядит код; импортируйте React, {Component } из ‘react’; импортируйте панель навигации из ‘./ Navbar’;

класс addContact расширяет React .Компонент {

     state = {
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        balance: ''
    };

handleSubmit = (e) => {
    e.preventDefault();
    this.props.addContact(this.state);
};
handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })
};

render() {
    return (
        <>
        <Navbar />
        <div className="add">
            <br></br>
            <div className="card">
                <div className="card-header">Add Client</div>
                <div className="card-body">
                    <form onSubmit={this.handleSubmit}>       
                        <label htmlFor="name">First Name:</label>
                        <input 
                        name="firstName"
                         placeholder="firstName" 
                         value={this.state.firstName} 
                         onChange={this.handleChange} />
                         <br></br>
                        <label htmlFor="name">Last Name:</label>
                            <input
                             name="lastName"
                             placeholder="lastName"
                              value={this.state.lastName}
                               onChange={this.handleChange} />
                               <br></br>
                        <label htmlFor="email">Email:</label>
                            <input
                             name="email"
                             placeholder="email"
                              value={this.state.email}
                               onChange={this.handleChange} />
                               <br></br>
                        <label htmlFor="phone">Phone:</label>
                            <input
                             name="phone"
                             placeholder="phone"
                              value={this.state.phone}
                                onChange={this.handleChange} />
                                <br></br>
                        <label htmlFor="balance">Balance:</label>
                        <input
                         name="balance"
                         placeholder="balance"
                          value={this.state.balance}
                           onChange={this.handleChange} />
                           <br></br>
                        <button className="btn-btn"><strong>Add</strong></button>
                    </form>
                </div>
            </div>
        </div>
        </>
    );
}
  

}

экспорт addContact по умолчанию;

Вам нужно добавить переменную списка в ваше состояние как:

 state = {
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    balance: '',
    list: [],
};
  

Теперь, когда вы обновляете свой список, сделайте это:

 handleSubmit = (e) => {
    e.preventDefault();
    const { firstName, lastName, email, phone, balance, list } = this.state;
    const contact = {
        firstName: firstName,
        lastName: lastName,
        email: email,
        phone: phone,
        balance: balance,
    }
    const updateList = [...list, contact];
    this.setState({
        list: [...updateList]
    })
};
  

Вы также можете записать сокращение как

 handleSubmit = (e) => {
    e.preventDefault();
    const { firstName, lastName, email, phone, balance, list } = this.state;
    const contact = {
        firstName,
        lastName,
        email,
        phone,
        balance,
    }
    const updateList = [...list, contact];
    this.setState({
        list: [...updateList]
    })
};