Ошибка: хуки можно вызывать только внутри тела функционального компонента.

Привет всем, я пытаюсь использовать хуки в своем приложении, но оно продолжает говорить «Необработанное отклонение (инвариантное нарушение)»: хуки можно вызывать только внутри тела функционального компонента. Я предполагаю, что одна из моих библиотек конфликтует с хуками, так как я не могу найти никаких проблем с кодом.

это мой package.json, я переношу все, от перекомпоновки до хуков ... Я пробовал использовать хуки с nex.js в тестовом проекте, и там все нормально работало ...

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^7.0.2",
    "next-images": "^1.0.1",
    "react": "^16.7.0-alpha.2",
    "react-dom": "^16.7.0-alpha.2",
    "recompose": "^0.30.0",
    "styled-components": "^4.1.1"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.9.0",
    "eslint": "^5.9.0",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-hooks": "^0.0.0"
  }
}

Это мой код:

import Layout from "../components/Layout";
import Head from "next/head";
import Register from "../blocks/Register";
import InputBox from "../components/InputBox";
import regexUtils from "../utils/regexUtils";
import { useState } from "react";


function BaseComponent() {
    const { errors, onSubmit } = useOnSubmit();
    const [name, setName] = useHandleInputChange("");
    const [email, setEmail] = useHandleInputChange("");
    const [password, setPassword] = useHandleInputChange("");
    const [passwordAgain, setPasswordAgain] = useHandleInputChange("");

    return (
        <Layout>
            <Head>
                <title>Sheet Builder - Register your account</title>
            </Head>
            <Register>
                <Register.Center>
                    <form>
                        <Register.Box>
                            <Register.Title>Create Account</Register.Title>
                            <InputBox error={errors.name} value={name} onChange={setName}>Your Name</InputBox>
                            <InputBox error={errors.email} value={email} onChange={setEmail}>Email</InputBox>
                            <InputBox error={errors.password} value={password} onChange={setPassword} mask>Password</InputBox>
                            <InputBox error={errors.passwordAgain} value={passwordAgain} onChange={setPasswordAgain} mask hint="Passwords must consist of at least 8 characters.">Password Again</InputBox>
                            <Register.Button onClick={onSubmit} type="submit" value="Register your Sheet Builder account" />
                        </Register.Box>
                    </form>
                </Register.Center>
            </Register>
        </Layout>
    );
}

function useHandleInputChange(initialState) {
    const [value, setValue] = useState(initialState);

    const handleInputChange = (e) => {
        setValue(e.target.value);
    };
    return [value, handleInputChange];
}

function useOnSubmit() {
    const initialState =
    {
        email: false,
        name: false,
        password: false,
        passwordAgain: false
    };

    const [errors, setErrors] = useState(initialState);

    const onSubmit = (e)=>{
        e.preventDefault();
        let result = {};
        result.email = !regexUtils.isEmailFormatValid(errors.email);
        result.name = !regexUtils.isFormatValid(errors.name);
        result.password = !regexUtils.isPasswordFormatValid(errors.password);
        result.passwordAgain = !regexUtils.isPasswordFormatValid(errors.passwordAgain);
        setErrors(result);
    };

    return {
        errors, 
        onSubmit
    };
}


export default BaseComponent;

reactjs react-hooks
person Muffin    schedule 06.12.2018    source источник
comment
Что делает простую функцию компонентом React? Я думаю, вернув JSX. Ваш useHandleInputChange этого не делает.   -  person kind user    schedule 06.12.2018
comment
Разве вы не забыли добавить import React, {useState} from 'react', чтобы иметь возможность запускать свои функции как функциональные компоненты?   -  person Eugene Gavrilov    schedule 25.12.2018

Ответы (2)


arrow_upward
0
arrow_downward

Похоже, что в отладчике кода Microsoft Visual Studio есть ошибка. Я запустил программу из командной строки, и после этого она отлично работала.

person Muffin    schedule 06.12.2018

arrow_upward
0
arrow_downward

вам нужно импортировать реакцию, чтобы функция могла рассматриваться как функциональный компонент реакции

import React, {useState} from 'react';

Прочтите это сообщение в блоге, чтобы понять Зачем импортировать React из «Реагировать» в функциональном компоненте?

person mabhijith95a10    schedule 22.03.2019