React中array.map渲染的按钮点击时无法向函数传值如何解决？

开发者阿泽

2026-9-29

问题根因及修复方案

你遇到的按钮点击无响应、参数未传递的核心问题是React事件名拼写错误，附带还有几处影响功能的逻辑问题，逐一修复如下：

1. 核心错误：事件名未使用驼峰命名

React 中所有事件绑定都要使用驼峰格式，你写的原生HTML全小写onclickReact无法识别，所以点击事件完全没有触发，自然不会调用函数传参。
把两个Button的onclick都改成onClick即可：

// 改前
<Button variant="danger" onclick={()=>{deletemoviereview(val.movie_name)}}>Delete</Button>
<Button onclick={()=> {updatereview(val.movie_name)}}>Update</Button>

// 改后
<Button variant="danger" onClick={()=>{deletemoviereview(val.movie_name)}}>Delete</Button>
<Button onClick={()=> {updatereview(val.movie_name)}}>Update</Button>

2. 其他影响功能的问题修复

（1）useEffect无限请求问题

你当前的useEffect没有加依赖数组，每次组件渲染都会重新执行，导致无限调用get接口，添加空依赖数组限定只在挂载时执行一次：

useEffect(()=>{
  Axios.get('http://localhost:3001/api/get').then((response)=>{
    setmovielist(response.data); 
  })
}, []) // 加空数组作为依赖

（2）提交评论时列表更新错误

当前submitReview里更新movielist的写法会把旧列表整个嵌套进新数组的第一个元素，要用展开运算符处理旧数组，同时要和后端返回的字段名对齐：

// 改前
setmovielist([movielist,{movieName:movieName,movieReview:review}]);
// 改后
setmovielist([...movielist,{movie_name:movieName,moview_review:review}]);