Я пытаюсь остановить обновление моего браузера при отправке запроса Post на сервер в моей функции handleSubmit

Question

У меня есть форма с ручкой. Нажмите кнопку «Отправить».В моей функции handleSubmit я делаю запрос Post на сервер и отправляет данные в состояние сервера и обновляет его.Однако при этом обновляется вся страница.

Как я могу предотвратить обновление браузера?

Я пробовал e.preventDefault ();это только заставляет вас нажать на обновление, чтобы увидеть его в браузере.

handleSubmit = async (e) => {
 console.log(e);
 const data = this.state.list;
 try {
   const addItem = await fetch('http://localhost:9000/addItem', {
     method: 'POST',
     credentials: 'include',
     body: JSON.stringify(this.state),
     headers: {
       'Content-Type': 'application/json'
     }
   });
 } catch(err) {
   console.log(err);
  }
}


componentDidMount() {
  this.getList().then((list) => {
   this.setState({list: list.data})
  }).catch((err) => {
   console.log(err);
  })
}
render() {
 let data = this.state.list
 let categoryList = Object.keys(data).splice(0, 9).map((item) =>
       <div className='category' key={item}>
         <h1> {item} </h1>
         <div className='itemWraper'>
           {data[item].map((value) =>
             <div key={value} style={{display: 'flex'}}>
               <p className='item'> {value} </p>
               <button className='deleteButton' item={value} id= 
                {this.state._id} onClick={() => this.deleteItem(value, 
                this.state._id, item)}>X</button>
             </div>
           )}
         </div>
       </div>
     )
 let category = Object.keys(data).splice(0, 9).map((item) =>
   <option key={item} value={item}>{item}</option>
 )

 return(
   <div className='background'>
       <h1 className='listName'> {this.props.data.name} </h1>
       <div className='wrapper'>
           <form>
             <input className='addItemInput' type='text' name='name' 
             placeholder='your item..' onChange={this.handleChange}/>
            <div className="select">
             <select name='category' onChange={this.handleChange}>
               <option> Choose a category </option>
                 {category}
             </select>
            </div>
            <button onClick={this.handleSubmit} 
            className='addItemButton'> + </button>
          </form>
       </div>
       <div className='categoryWrapper'>
           {categoryList}
       </div>
   </div>
  )
 }
}

Нет ошибок.Работает функционально.Я просто хотел бы, чтобы это было более реагировать, как

Answer 1

e.preventDefault () понадобится для предотвращения перезагрузки страницы.

Вы должны добавить элемент в состояние компонентов или приложений одновременно с публикацией, чтобы он по-прежнему отображался.

handleSubmit = async (e) => {
 console.log(e);
 const data = this.state.list;
 try {
   const addItem = await fetch('http://localhost:9000/addItem', {
     method: 'POST',
     credentials: 'include',
     body: JSON.stringify(this.state),
     headers: {
       'Content-Type': 'application/json'
     }
   });
   this.setState({list: [...this.state.list, YOUR_NEW_ADDITION_TO_THE_LIST]})
 } catch(err) {
   console.log(err);
  }
}

Answer 2

Полагаю, вы используете кнопку отправки, например, если это так, то нажатие на эту кнопку обновит страницу.Таким образом, изменение типа с отправки на кнопку может решить вашу проблему.