无效的挂钩调用。我怎样才能调用调度？答案

【问题标题】：Invalid hook call. How can I call dispatch?无效的挂钩调用。我怎样才能调用调度？
【发布时间】：2021-12-15 10:27:53
【问题描述】：

我正在尝试将数据从输入发送到 redax 存储。为什么dispatch(addChild(parent)) 会出错？

Error: Invalid hook call. Hooks can only be called inside of the body of a function component

import {useDispatch} from "react-redux";
import { addChild} from "../../store/actions/actions";

const Form = () => {
    const [parent, setParent] = useState([{name: "", age: ""}]);
    const [childList, setChildList] = useState([{name: "", age: ""}])
    const dispatch = useDispatch;

    const handleChange = (e, index) => {
        const { name, value } = e.target;
        const child = [...childList];
        child[index][name] = value;
        setChildList(child)
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        dispatch(addChild(parent))
    }

    const addChildElement = ()=> {
        setChildList( [...childList, {name: "", age: ""}]);
    }

    return (
        <form className="form" onSubmit={handleSubmit}>
            <div className="form__parent">
                <div className="form-title">Персональные данные</div>
                <div className="form-item">
                    <input className="form-input" type="text"
                           value={parent.name}
                           onChange={(e) => setParent({...parent, name: e.target.value})}
                    />
                    <label className="form-label">Имя</label>
                </div>
                <div className="form-item">
                    <input className="form-input" type="number"
                           value={parent.age}
                           onChange={(e) => setParent({...parent, age: e.target.value})}
                    />
                    <label className="form-label">Возраст</label>
                </div>
            </div>
            <div className="form__child">
                <div className="form__child-head">
                    <div className="form-title">Дети (макс.5)</div>
                    <button className="btn add-child-btn" onClick={addChildElement}>Добавить ребенка</button>
                </div>
                <ul className="form__child-content">
                    {
                        childList.map((value, id) => {
                            return (
                                <li className="child-list" key={id}>
                                    <div className="form-item">
                                        <input className="form-input" type="text"
                                               name="name"
                                               value={value.name}
                                               onChange={e => handleChange(e, id)}
                                        />
                                        <label className="form-label">Имя</label>
                                    </div>
                                    <div className="form-item">
                                        <input className="form-input" type="number"
                                               value={value.age}
                                               name="age"
                                               onChange={e => handleChange(e, id)}
                                        />
                                        <label className="form-label">Возраст</label>
                                    </div>
                                    <button className="remove-list">Удалить</button>
                                </li>
                            );
                        })
                    }
                </ul>
                <input className="btn submit" type="submit" value="Сохранить" />
            </div>
        </form>
    );
}

export default Form;`

【问题讨论】：

标签： reactjs redux react-hooks

【解决方案1】：

这是你犯的错误。 useDispatch 声明中缺少调用方括号()。

应该像下面这样更正

const dispatch = useDispatch();

错误是完全有效的，因为现在您的dispatch 不是useDispatch 的输出。它是useDispatch 本身，错误是由于useDispatch 钩子在handleSubmit 中使用。

【讨论】：