React中如何在setState更新函数内访问外部传入的参数

实现逻辑说明 #

JavaScript天然支持闭包特性，内层函数可以直接访问外层作用域的变量。你传入deleteRow的rowId属于该函数的外层作用域变量，setState的更新回调作为内层函数，不需要额外处理就可以直接访问该参数。

改造后的代码示例 #

const [tableData, settableData] = useState({ tableDataList: [] });

const deleteRow = (rowId) => {
  // 可先加日志确认rowId是否正确从按钮侧传入
  // console.log('待删除的行ID：', rowId)
  settableData(tData => {
    // 直接使用rowId过滤数组即可
    const filteredList = tData.tableDataList.filter(item => item.id !== rowId)
    // 返回新的state对象，保留原有state的其他属性
    return {
      ...tData,
      tableDataList: filteredList
    }
  })
}

你现有按钮的传参写法无需修改，是正确的：

<button className="btn-dark" onClick={() => deleteRow(rowId)}>DELETE</button>

注意事项 #

• 操作state时要遵循不可变原则，不要直接修改原tableDataList数组，使用filter会返回新数组，符合React的状态更新要求
• 如果确实出现拿不到rowId的情况，优先排查按钮侧的rowId是否为有效值，可在deleteRow开头加日志验证参数正确性

内容的提问来源于stack exchange，提问作者Anil P Babu