在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 BookList() {
  const [books, setBooks] = useState([]);
  const [selectedBookId, setSelectedBookId] = useState(null);
  const [formData, setFormData] = useState({});

  useEffect(() => {
    // 假设这是您的API获取逻辑
    axios.get('https://example.com/api/v1/books')
      .then(response => {
        setBooks(response.data.data); // 假设data字段是数组
      })
      .catch(error => console.error("Error fetching books:", error));
  }, []);

  // 当用户选择一本书进行编辑时，我们可以捕获其ID
  const handleEditClick = (book) => {
    setSelectedBookId(book.id);
    setFormData(book); // 将当前书籍数据填充到表单
  };

  // ... 后续更新逻辑
}

const apiUrl = 'https://example.com/api/v1/something'; // 基础API路径
const bookIdToUpdate = selectedBookId; // 从React状态中获取的ID
const updateUrl = `${apiUrl}/${bookIdToUpdate}`; // 构建完整的PUT请求URL
// 例如：https://example.com/api/v1/something/11

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

function BookEditor() {
  const [books, setBooks] = useState([]);
  const [selectedBookId, setSelectedBookId] = useState(null);
  const [formData, setFormData] = useState({
    author: '',
    title: '',
    year: '',
    // ... 其他字段
  });

  useEffect(() => {
    // 模拟初始数据获取
    axios.get('https://example.com/api/v1/books')
      .then(response => {
        setBooks(response.data.data);
      })
      .catch(error => console.error("Error fetching books:", error));
  }, []);

  const handleEditClick = (book) => {
    setSelectedBookId(book.id);
    setFormData(book); // 将选中的书籍数据填充到表单
  };

  const handleFormChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (event) => {
    event.preventDefault(); // 阻止表单默认提交行为

    if (!selectedBookId) {
      alert("请先选择要编辑的书籍！");
      return;
    }

    const url = `https://example.com/api/v1/books/${selectedBookId}`; // 动态构建URL

    try {
      // 发送PUT请求，将更新后的formData作为请求体
      const response = await axios.put(url, formData);
      console.log("Update successful:", response.data);
      // 更新本地状态，反映后端变化
      setBooks(prevBooks => 
        prevBooks.map(book => 
          book.id === selectedBookId ? { ...book, ...formData } : book
        )
      );
      // 清空选择和表单
      setSelectedBookId(null);
      setFormData({ author: '', title: '', year: '' });
      alert("书籍更新成功！");
    } catch (error) {
      console.error("Error updating book:", error.response || error.message);
      alert("更新失败，请稍后再试。");
      // 可以在此处添加更详细的错误处理逻辑
    }
  };

  return (
    <div>
      <h1>书籍列表</h1>
      <ul>
        {books.map(book => (
          <li key={book.id}>
            {book.title} by {book.author} ({book.year})
            <button onClick={() => handleEditClick(book)}>编辑</button>
          </li>
        ))}
      </ul>

      {selectedBookId && (
        <form onSubmit={handleSubmit}>
          <h2>编辑书籍 (ID: {selectedBookId})</h2>
          <div>
            <label>作者:</label>
            <input
              type="text"
              name="author"
              value={formData.author || ''}
              onChange={handleFormChange}
            />
          </div>
          <div>
            <label>标题:</label>
            <input
              type="text"
              name="title"
              value={formData.title || ''}
              onChange={handleFormChange}
            />
          </div>
          <div>
            <label>年份:</label>
            <input
              type="text"
              name="year"
              value={formData.year || ''}
              onChange={handleFormChange}
            />
          </div>
          <button type="submit">保存更新</button>
          <button type="button" onClick={() => { setSelectedBookId(null); setFormData({}); }}>取消</button>
        </form>
      )}
    </div>
  );
}

export default BookEditor;