React项目调用dispatch出现Invalid hook call报错如何解决

问题根因 #

两处代码错误导致异常：

• useDispatch 是React Hook，你没有执行调用就直接将函数本身赋值给了dispatch变量，调用dispatch(addChild(parent))时本质是在事件回调中执行Hook，违反了Hook只能在函数组件顶层调用的规则，触发报错。
• parent状态初始值定义错误，你初始赋值为包含对象的数组[{name: "", age: ""}]，但后续更新、取值都按普通对象处理，会导致表单数据异常。

修复步骤 #

1. 修正useDispatch调用 #

// 原错误写法
// const dispatch = useDispatch;
// 修正为
const dispatch = useDispatch();

2. 修正parent初始值 #

// 原错误写法
// const [parent, setParent] = useState([{name: "", age: ""}]);
// 修正为
const [parent, setParent] = useState({name: "", age: ""});

可选优化 #

表单内的普通按钮默认type为submit，点击时会触发表单提交行为，建议给「添加孩子」「删除」按钮添加type="button"属性避免异常：

<button type="button" className="btn add-child-btn" onClick={addChildElement}>Добавить ребенка</button>
<button type="button" className="remove-list">Удалить</button>

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