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

Question

我正在尝试将数据从输入发送到 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;`

Answer 1

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

应该更正如下

const dispatch = useDispatch();

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

中使用了 useDispatch 钩子

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

Invalid hook call. How can I call dispatch?

reactjs

redux

react-hooks