如何在React中调用接口onSubmit并根据新值进行更新？

import React, { useState } from 'react';

const MyComponent = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = async () => {
    try {
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: JSON.stringify({ value }),
        headers: {
          'Content-Type': 'application/json'
        }
      });

      const data = await response.json();
      // 根据返回的数据更新组件状态
      // 例如，可以使用setState更新value的值
      // setState(data.value);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
};

export default MyComponent;