Question

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

actions / forgetpassword.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
        });
    }
};

在执行功能时出现错误，表示功能不是挂钩函数，不是自定义挂钩函数

forgetpassword.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将其识别为功能而不是组件，并引发该错误。

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

1 个答案: