登录错误：onLoginSuccess 不是函数

Question

这是作者登录 Web 应用程序的组件

//AuthorLogin
import { Button, CircularProgress, Fade, Link, TextField, Typography } from '@material-ui/core';
import { ThemeProvider, createTheme, makeStyles } from '@material-ui/core/styles';
import axios from 'axios';
import React, { useState } from 'react';
import { Link as RouterLink, useNavigate } from 'react-router-dom';
import backgroundImage from './background.jpg';



const theme = createTheme({
    palette: {
        primary: {
            main: '#00bcd4', // Cyan color
        },
        error: {
            main: '#ff1744', // Error color
        },
    },
});

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        minHeight: '100vh',
        backgroundImage: `url(${backgroundImage})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
    },
    formContainer: {
        maxWidth: 400,
        width: '100%',
        padding: theme.spacing(4),
        borderRadius: theme.shape.borderRadius,
        boxShadow: theme.shadows[5],
        backgroundColor: '#fff',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    form: {
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    textField: {
        width: '100%',
        marginBottom: theme.spacing(3),
    },
    button: {
        marginTop: theme.spacing(2),
        width: '100%',
        maxWidth: 200,
        padding: theme.spacing(1.5),
    },
    title: {
        fontFamily: 'Roboto, sans-serif',
        fontWeight: 700,
        fontSize: '2.5rem',
        color: theme.palette.primary.main,
        marginBottom: theme.spacing(3),
        textAlign: 'center',
        textShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)',
    },
    error: {
        marginTop: theme.spacing(2),
        color: theme.palette.error.main,
        textAlign: 'center',
    },
    link: {
        marginTop: theme.spacing(2),
        textAlign: 'center',
    },
}));

const AuthorLogin = ({onLoginSuccess}) => { // Accept onLoginSuccess as a prop

    const classes = useStyles();
    const navigate = useNavigate();
    const [formData, setFormData] = useState({
        email: '',
        password: '',
    });
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

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

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        try {
            const response = await axios.post('http://localhost:5000/api/author/login', formData);
            console.log('Login successful:', response.data);
            // Redirect to writing portfolio upon successful login
            navigate('/writingPortfolio');
            onLoginSuccess(); // Call onLoginSuccess upon successful login
        } catch (error) {
            console.error('Error logging in:', error.response ? error.response.data.message : error.message);
            setError(error.response ? error.response.data.message : error.message);
        }
        setLoading(false);
    };

    return (
        <div className={classes.root}>
            <Fade in={true} timeout={1500}>
                <div className={classes.formContainer}>
                    <ThemeProvider theme={theme}>
                        <Typography variant="h1" className={classes.title}>
                            Author Login
                        </Typography>
                        <form onSubmit={handleSubmit} className={classes.form}>
                            <TextField
                                type="email"
                                label="Email"
                                name="email"
                                value={formData.email}
                                onChange={handleChange}
                                variant="outlined"
                                className={classes.textField}
                                required
                                placeholder="Enter your email"
                            />
                            <TextField
                                type="password"
                                label="Password"
                                name="password"
                                value={formData.password}
                                onChange={handleChange}
                                variant="outlined"
                                className={classes.textField}
                                required
                                placeholder="Enter your password"
                            />
                            <Button
                                type="submit"
                                variant="contained"
                                color="primary"
                                className={classes.button}
                                disabled={loading}
                            >
                                {loading ? <CircularProgress size={24} color="inherit" /> : 'Login'}
                            </Button>
                            {error && <Typography variant="body2" className={classes.error}>{error}</Typography>}
                        </form>
                        <Typography variant="body2" className={classes.link}>
                            Don't have an account?{' '}
                            <Link component={RouterLink} to="/AuthorRegistration">
                                Sign up
                            </Link>
                        </Typography>
                    </ThemeProvider>
                </div>
            </Fade>
        </div>
    );
};

export default AuthorLogin;

这是父组件，用于帮助作者更新其详细信息并进行身份验证，以便作者访问页面的各个部分

这是定义函数的地方，也是我想从中调用函数的地方，但尽管我尝试了一切，但没有成功

// ParentComponent.js
import React, { useState } from 'react';
import AuthorDashboard from './AuthorDashboard';
import AuthorLogin from './AuthorLogin';
import AuthorProfile from './AuthorProfile';
import AuthorSettings from './AuthorSettings';

const ParentComponent = () => {
    const [author, setAuthor] = useState(null);
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [error, setError] = useState(null);

    const handleUpdateAuthor = (updatedAuthor) => {
        setAuthor(updatedAuthor);
    };

    const handleLoginSuccess = () => {
        setIsAuthenticated(true);
        try {
            setError(null); // Clear any previous errors on successful login
        } catch (error) {
            console.error('Error handling login success:', error);
            setError('An error occurred while handling login success.');
        }
    };
    

    const handleLoginError = (errorMessage) => {
        setError(errorMessage);
    };
    
    

    return (
        <div>
            {isAuthenticated ? (
                <>
                    <AuthorSettings author={author} onUpdateAuthor={handleUpdateAuthor} />
                    <AuthorProfile author={author} />
                    <AuthorDashboard isAuthenticated={isAuthenticated} authorId={author.id} />
                </>
            ) : (
                <AuthorLogin onLoginSuccess={handleLoginSuccess} onLoginError={handleLoginError} />
            )}

            {error && <p style={{ color: 'red' }}>{error}</p>}
        </div>
    );
};


export default ParentComponent;

Answer 1

我正在测试您的代码以确定是否在 API 成功时调用 onLoginSuccess 。您能否提供更多详细信息，例如控制台错误和其他相关信息，以便我可以彻底检查它？我正在向其他人解释这一点，因此为了清楚起见，要求进行修改。