React点击按钮更新state第55行报no-unused-expressions错误如何解决

云上老周

2026-10-6

React状态更新报错排查与修复

错误原因

核心报错触发点在students.map的回调函数逻辑：你使用了带花括号{}的箭头函数写法，花括号内部仅编写了三元判断表达式，既没有赋值操作也没有return返回该表达式的结果，属于无效的未使用表达式，因此触发ESLint的no-unused-expressions规则校验报错。
额外潜在问题：你当前直接依赖外层students变量更新状态，若存在多次并发更新的场景，容易因为闭包捕获旧状态导致更新结果不符合预期。

修复方案

你可以任选以下两种写法修复：

方案1：使用箭头函数隐式返回（代码更简洁，推荐）

直接去掉map回调的花括号，让三元表达式的结果作为返回值，同时改用函数式更新保证状态准确性：

const addUpdateStudentHandler = (mystudent) =>{
  axios.put(`http://localhost:3006/students/${mystudent.id}`, mystudent)
  .then(res=>{
    setstudents(prevStudents => prevStudents.map(student => 
      student.id === res.data.id ? {...res.data} : student
    ))
  })
}

方案2：保留花括号，显式添加return语句

如果需要在map回调内写更多逻辑，可以保留花括号，手动添加return返回对应值：

const addUpdateStudentHandler = (mystudent) =>{
  axios.put(`http://localhost:3006/students/${mystudent.id}`, mystudent)
  .then(res=>{
    const { id } = res.data;
    setstudents(prevStudents => prevStudents.map((student) =>{
      return student.id === id ? {...res.data} : student;
    }))
  })
}