如何使用axios更改reactjs中用户名的状态？

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

function UserProfile() {
  const [username, setUsername] = useState('');

  useEffect(() => {
    // 假设我们有一个API端点可以获取当前用户的用户名
    axios.get('/api/user/profile')
      .then(response => {
        setUsername(response.data.username);
      })
      .catch(error => {
        console.error('There was an error fetching the username!', error);
      });
  }, []); // 空依赖数组意味着这个effect只会在组件挂载时运行一次

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 发送新的用户名到服务器
    axios.post('/api/user/update', { username })
      .then(response => {
        console.log('Username updated successfully:', response.data);
      })
      .catch(error => {
        console.error('There was an error updating the username!', error);
      });
  };

  return (
    <div>
      <h1>User Profile</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Username:
          <input type="text" value={username} onChange={handleUsernameChange} />
        </label>
        <button type="submit">Update Username</button>
      </form>
    </div>
  );
}

export default UserProfile;