如何在react中从前端向json api添加新对象

import React, { useState } from 'react';

const AddObjectForm = () => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    const newObject = {
      name,
      description,
    };

    try {
      const response = await fetch('https://api.example.com/objects', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(newObject),
      });

      if (response.ok) {
        // 处理成功响应
        console.log('Object added successfully!');
        // 可以更新组件状态或重新加载数据
      } else {
        // 处理错误响应
        console.error('Failed to add object');
      }
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <br />
      <label>
        Description:
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
      </label>
      <br />
      <button type="submit">Add Object</button>
    </form>
  );
};

export default AddObjectForm;