如何在React中处理后台更新和表单输入？

import React, { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState([]);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    // 发送异步请求获取后台数据
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('/api/data');
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      // 发送异步请求将表单输入的值发送到后台
      await fetch('/api/submit', {
        method: 'POST',
        body: JSON.stringify({ inputValue }),
        headers: {
          'Content-Type': 'application/json',
        },
      });
      // 清空输入框
      setInputValue('');
      // 更新后台数据
      fetchData();
    } catch (error) {
      console.error('Error submitting form:', error);
    }
  };

  return (
    <div>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input type="text" value={inputValue} onChange={handleInputChange} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;