React JS按钮代码确认无误却无法运行，跟随CRUD开发教程操作出现异常

React CRUD 按钮功能失效排查方案 #

• 检查事件绑定语法：按钮onClick绑定不要带括号执行，正确写法为onClick={处理函数名}，传参时用onClick={() => 处理函数(参数)}；类组件需提前绑定方法的this指向，或直接用箭头函数定义方法。
• 检查state更新逻辑：数组、对象类型的state必须返回全新值触发重渲染，禁止直接修改原state值，例如新增数组项需写成setList([...原列表, 新项])，不能直接用push方法修改原数组。
• 检查表单默认行为：如果按钮位于<form>标签内部，点击会触发默认提交刷新页面，需在事件处理函数第一行添加e.preventDefault()阻止默认行为。
• 检查导入导出语法：如果控制台报变量未定义错误，核对组件/方法的导入名称、路径是否和导出规则匹配，默认导出对应import 名称 from '路径'，命名导出对应import { 名称 } from '路径'。
• 检查React版本适配：若教程使用React 17及更早版本，本地用React 18会存在API差异，可将package.json中react、react-dom版本调整为和教程一致后重新安装依赖测试。

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