第 8 行：React Hook “useState” 在函数“forgetPassword”中调用，它既不是 React 函数组件，也不是自定义 React Hook 函数

Question

我还参考了 react_hooks 的文档，但没有帮助，所以请帮我处理这段代码

动作/忘记密码.js

import axios from "axios";
import {setAlert} from "./alert";

//find email in database

export const forgetpassword = ({email}) => async dispatch => {

    const body = JSON.stringify({email});
    try {
        const res = await axios.post('/api/otp/forgetpassword', body);
        dispatch({
            type: EMAIL_FOUND,
            payload: res.data
        });
    } catch (err) {
        const errors = err.response.data.errors;

        if (errors) {
            errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
        }
        dispatch({
            type: EMAIL_ERROR
        });
    }
};

制作函数时出错，它说函数不是钩子函数不是自定义钩子函数

忘记密码.js

它说这个文件中有错误

import React, {Fragment, useState} from 'react';
import {Link, Redirect} from "react-router-dom";
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {forgetpassword} from '../../actions/forgetpassword';

const forgetPassword = ({forgetpassword}) => {

    const [formData, setformData] = useState({
        email:''
    });
    const {email} = formData;

    const onChange = e => setformData({...formData, [e.target.name]: e.target.value});

    const onSubmit = async e => {
        e.preventDefault();
        console.log('SUCCESS');
        forgetpassword(email);
    };

    return (
        <Fragment>
            <h1 className="large text-primary">Sign In</h1>
            <p className="lead"><i className="fas fa-user"></i> Sign Into Your account</p>
            <form className="form" onSubmit={e => onSubmit(e)}>
                <div className="form-group">
                    <input type="email" placeholder="Email Address" name="email" value={email}
                          onChange={e => onChange(e)}/>
                </div>
                <input type="submit" className="btn btn-primary" value="Login"/>
            </form>
        </Fragment>
    );
};
forgetPassword.prototype = {
    forgetpassword: PropTypes.func.isRequired,
};

export default connect(null, {forgetpassword})(forgetPassword);

错误

Line 8:  React Hook "useState" is called in function "forgetPassword" which is neither a React function component or a custom React Hook function```

I have attached all the code related to error so if any body knows the problem tell me

Answer 1

问题似乎是组件名称不是以大写字母开头。

React 将其识别为函数而不是组件，并抛出该错误。