Неверный вызов хуков. Хуки могут вызываться только внутри тела функционального компонента?

Question

[Aziret]

Пытаюсь полученные данные из инпутов отправить в редакс хранилище. Почему при диспатче dispatch(addChild(parent)) выходит ошибка?

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

import "./form.css";
import { useState } from "react";
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;

Comments

[Nikolay Matyushkin]

useDispatch()

Answer 1

[Pavel Shvedov]

useDispatch()

Answer 2

[Test-style]

import React, { useState } from 'react';