尝试执行CRUD，但更新不工作

Question

新手。我正在使用rails进行购物车反应项目，并在页面上对用户评论执行CRUD操作，除了更新方法外，每个操作都运行良好，我做错了什么?下面是我在Reviews组件上编写的代码。不要介意这些乱七八糟的代码，我还在慢慢适应。

function Renderreview() {
const [renderReview, setRenderReview] = useState([])
const [data, setData] = useState({
review: ""

}) 
useEffect(() => {
axios.get('/reviews')
.then(res => {
console.log(res)
setRenderReview(res.data)
})
.catch(err => {
console.log(err)
})
}, [])
function submit(e){
e.preventDefault();
axios.post("/reviews",{
review: data.review,
})
.then(res =>{
console.log(res.data)
})
}
function editReview(id){

axios.put(`/reviews/${id}`,)
.then(console.log(id))
}
function handleDelete(id) {
axios.delete(`/reviews/${id}`,)
}

function handle(id){
const newdata={...data}
newdata[id.target.id] = id.target.value
setData(newdata)
console.log(data)
}
function handle2(e){
const newdata={...renderReview}
newdata[e.target.id] = e.target.value
setData(newdata)
console.log(data)
}
return (
<div className='card1'>
<div>
<form className='reviews' onSubmit={(e) => submit(e)}>
<input onChange={(e)=>handle(e)} id="review" defaultvalue={data.review} placeholder="review" type="text"></input>
<button>submit review</button>
</form>
</div>

<h2>reviews</h2>
{renderReview.map((renderReview) => {
return (
<div className='renderedreviews'>{renderReview.review}
<button
onClick={() => {
handleDelete(renderReview.id);
}}
key={renderReview.review}>
Delete
</button>
<form className='reviews' onSubmit={(id) => editReview(id)}>
<input onChange={(id)=>handle2(id)} id="review" defaultvalue={renderReview.review} placeholder="edit" type="text"></input>

<button
onClick={() => {
editReview(renderReview.id);
}}
key={renderReview.review}>
edit
</button>
</form>
</div>
)
})}
</div>
)
}

class ReviewsController < ApplicationController

def index
reviews = Review.all
render json: reviews
end


def update
review = find_review
if review
review.update(review_params)
render json: review
else
render json: {error: "Review not found"}, status: :not_found
end
end
def destroy
review =find_review
if review.destroy
head :no_content
else
render json: {error: review.errors.messages}, status: 422
end
end
def create
review = Review.create(review_params)
render json: review
end

private

def find_review
Review.find_by(id: params[:id])
end

def review_params
params.permit(:review)
end
end

Answer 1

我认为你的代码缺少两件事。

1. 您的<input>中没有value

<input
onChange={(id) => handle2(id)}
id="review"
defaultvalue={renderReview.review}
placeholder="edit"
type="text"
value={data.review}
></input>

3. editReview中没有有效载荷

function editReview(id) {
axios
.put(`/reviews/${id}`, {
review: data.review,
})
.then(console.log(id));
}