React中Review更新无响应求助（Delete功能正常）

你的更新功能无响应，核心问题集中在Axios方法错误、表单逻辑混乱、数据传递缺失这几点，以下是具体问题和修复方案：

1. Axios不存在update方法 #

Axios提供的HTTP更新方法是put（全量更新）或patch（部分更新），没有update这个API，这是请求根本发不出去的核心原因。

2. 表单与按钮的事件绑定混乱 #

• 表单的onSubmit和按钮的onClick重复绑定handleSubmit，导致参数传递混乱，且未阻止表单默认提交行为（会触发页面刷新）。
• 输入框的onChange错误绑定handleSubmit，每次输入都会触发无效请求。

3. 未获取输入框的新内容 #

handleSubmit没有读取输入框的最新值，就算请求发出去，后端也拿不到要更新的内容。

4. 其他细节问题 #

• 输入框的defaultvalue是拼写错误，React中需用defaultValue（驼峰命名）。
• key属性应放在循环渲染的最外层元素上，而非按钮，否则React的diff算法无法正确识别元素。
• 未添加请求错误捕获，也未在更新成功后刷新列表，导致UI与数据库不同步。

修复后的完整代码 #

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

function Renderreview() {
  const [renderReview, setRenderReview] = useState([])

  useEffect(() => {
    fetchReviews()
  }, [])

  // 封装获取列表方法，方便更新后调用
  const fetchReviews = () => {
    axios.get('/reviews')
      .then(res => {
        setRenderReview(res.data)
      })
      .catch(err => {
        console.error('获取评论失败:', err)
      })
  }

  const handleDelete = (id) => {
    axios.delete(`/reviews/${id}`)
      .then(() => fetchReviews())
      .catch(err => {
        console.error('删除评论失败:', err)
      })
  }

  const handleSubmit = (e, id) => {
    e.preventDefault()
    const updatedReview = e.target.review.value.trim()
    if (!updatedReview) return

    // 使用put发送更新请求
    axios.put(`/reviews/${id}`, { review: updatedReview })
      .then(() => {
        fetchReviews()
        e.target.review.value = ''
      })
      .catch(err => {
        console.error('更新评论失败:', err)
      })
  }

  return (
    <div className='card1'>
      <h2>reviews</h2>
      {renderReview.map((item) => {
        return (
          <div className='renderedreviews' key={item.id}>
            {item.review}
            <button onClick={() => handleDelete(item.id)}>
              Delete
            </button>

            <form className='reviews' onSubmit={(e) => handleSubmit(e, item.id)}>
              <input 
                id="review" 
                defaultValue={item.review} 
                placeholder="edit" 
                type="text"
              />
              <button type="submit">edit review</button>
            </form>
          </div>
        )
      })}
    </div>
  )
}

export default Renderreview

内容的提问来源于stack exchange，提问作者Kelvin Matheka