React中利用API数组数据中的ID进行PUT更新的教程

{
   "pagination": {
                 "sortDirection": "DESC",
                 "totalPages": 1,
                 "pageSize": 25,
                 "currentPage": 1,
                 "totalElements": 17
    },
   "data": [
             {
               "author": "Rudra",
               "country": null,
               "language": "Marathi",
               "link": "https://www.google.com",
               "pages": "250",
               "title": "Test Book",
               "year": "2023",
               "id": 11
             },
             {
               "author": "Bhavik",
               "country": null,
               "language": "Gujarati",
               "link": "",
               "pages": "123",
               "title": "testing",
               "year": "2023",
               "id": 13
              }
         ]
}

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

function DataUpdater() {
  // 假设我们已经从API获取了数据并存储在组件状态中
  const [items, setItems] = useState([]);
  const [editingItem, setEditingItem] = useState(null); // 存储当前正在编辑的项
  const [formData, setFormData] = useState({}); // 存储表单数据

  // 模拟从API获取数据
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/v1/items'); // 替换为你的GET API端点
        setItems(response.data.data); // 假设数据结构如上所示
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };
    fetchData();
  }, []);

  // 当用户点击某个项进行编辑时
  const handleEditClick = (item) => {
    setEditingItem(item);
    setFormData({ // 初始化表单数据为当前项的值
      author: item.author,
      title: item.title,
      // ... 其他字段
    });
  };

  // 处理表单输入变化
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 提交更新请求
  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!editingItem || !editingItem.id) {
      console.error("No item selected for update or item has no ID.");
      return;
    }

    const itemId = editingItem.id;
    // 构建PUT请求的URL，将ID拼接在路径中
    const url = `https://api.example.com/v1/items/${itemId}`; // 替换为你的PUT API端点

    try {
      // 发送PUT请求，请求体为表单数据
      const response = await axios.put(url, formData);
      console.log("Update successful:", response.data);

      // 更新本地状态以反映更改
      setItems(prevItems =>
        prevItems.map(item => (item.id === itemId ? { ...item, ...formData } : item))
      );

      // 清除编辑状态
      setEditingItem(null);
      setFormData({});

    } catch (error) {
      console.error("Error updating data:", error.response ? error.response.data : error.message);
      // 根据错误类型进行更详细的处理，例如显示错误消息给用户
    }
  };

  return (
    <div>
      <h1>数据列表</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.title} by {item.author}
            <button onClick={() => handleEditClick(item)}>编辑</button>
          </li>
        ))}
      </ul>

      {editingItem && (
        <div>
          <h2>编辑项 (ID: {editingItem.id})</h2>
          <form onSubmit={handleSubmit}>
            <div>
              <label>
                作者:
                <input
                  type="text"
                  name="author"
                  value={formData.author || ''}
                  onChange={handleChange}
                />
              </label>
            </div>
            <div>
              <label>
                标题:
                <input
                  type="text"
                  name="title"
                  value={formData.title || ''}
                  onChange={handleChange}
                />
              </label>
            </div>
            {/* 其他需要更新的字段 */}
            <button type="submit">保存更改</button>
            <button type="button" onClick={() => setEditingItem(null)}>取消</button>
          </form>
        </div>
      )}
    </div>
  );
}

export default DataUpdater;