如何在React中通过fetch API在表单提交上使用setState？

import React, { Component } from 'react';

class MyForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: ''
    };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { name, email } = this.state;

    // 使用fetch API发送表单数据到服务器
    fetch('https://example.com/submit', {
      method: 'POST',
      body: JSON.stringify({ name, email })
    })
      .then(response => response.json())
      .then(data => {
        // 根据服务器返回的数据更新组件状态
        this.setState({ name: '', email: '' });
        console.log('Form submitted successfully');
      })
      .catch(error => {
        console.error('Error submitting form:', error);
      });
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  render() {
    const { name, email } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={name} onChange={this.handleChange} />
        </label>
        <br />
        <label>
          Email:
          <input type="email" name="email" value={email} onChange={this.handleChange} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default MyForm;