在handleSubmit函数中向后端发出Post请求时，我试图阻止浏览器刷新

Question

我有一个带有handle的表单单击我的提交按钮。 在我的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

我猜想您正在使用“提交”按钮，如是这种情况，则单击该按钮将刷新页面。 因此，将类型从提交更改为按钮可以解决您的问题。

Answer 2

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);
  }
}