未处理的拒绝 (TypeError)：props.setAlert 不是函数

Question

这是错误：SCREENSHOT 它应该显示：this

我正在使用带有 asyncAwait 的箭头函数。 VSCode 没有在控制台中抛出任何错误。我很难调试这个。我刚刚开始使用 redux，我不确定我是否遗漏了任何东西或没有正确使用某些东西。我试过浏览文档，但就此而言，我似乎正确地使用了箭头功能。我可能做错了，但找不到这里的问题。

这是我的 register.js 文件，我不明白为什么它说 props.setAlert 不是函数：

import React, { Fragment, useState } from 'react';
import { Link } from 'react-router-dom';

import { connect } from 'react-redux';
import { setAlert } from '../../actions/alert';

export const Register = (props) => {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        password: '',
        password2: '',
    });
    const { name, email, password, password2 } = formData;
    const onChange = (e) =>
        setFormData({
            ...formData,
            [e.target.name]: e.target.value,
        });
    const onSubmit = async (e) => {
        e.preventDefault();
        if (password !== password2) {
            props.setAlert('Passwords do not match', 'danger');
        } else {
            console.log('SUCCESS');
        }
    };
    return (
        <Fragment>
            <h1 className='large text-primary'>Sign Up</h1>
            <p className='lead'>
                <i className='fas fa-user'></i> Create Your Account
            </p>
            <form className='form' onSubmit={(e) => onSubmit(e)}>
                <div className='form-group'>
                    <input
                        type='text'
                        placeholder='Name'
                        name='name'
                        value={name}
                        onChange={(e) => onChange(e)}
                        required
                    />
                </div>
                <div className='form-group'>
                    <input
                        type='email'
                        placeholder='Email Address'
                        name='email'
                        value={email}
                        onChange={(e) => onChange(e)}
                        required
                    />
                    <small className='form-text'>
                        This site uses Gravatar so if you want a profile image,
                        use a Gravatar email
                    </small>
                </div>
                <div className='form-group'>
                    <input
                        type='password'
                        placeholder='Password'
                        name='password'
                        minLength='6'
                        value={password}
                        onChange={(e) => onChange(e)}
                        required
                    />
                </div>
                <div className='form-group'>
                    <input
                        type='password'
                        placeholder='Confirm Password'
                        name='password2'
                        minLength='6'
                        value={password2}
                        onChange={(e) => onChange(e)}
                        required
                    />
                </div>
                <input
                    type='submit'
                    className='btn btn-primary'
                    value='Register'
                />
            </form>
            <p className='my-1'>
                Already have an account? <Link to='/login'>Sign In</Link>
            </p>
        </Fragment>
    );
};

export default connect(null, { setAlert })(Register);

这是 alert.js 动作文件：

import { v4 as uuidv4 } from 'uuid';
import { SET_ALERT, REMOVE_ALERT } from './types';

export const setAlert = (msg, alertType) => (dispatch) => {
    const id = uuidv4();
    dispatch({
        type: SET_ALERT,
        payload: { msg, alertType, id },
    });
};

在我的 types.js 中，我只导出了两种警报类型：

export const SET_ALERT = 'SET_ALERT';
export const REMOVE_ALERT = 'REMOVE_ALERT';

Answer 1

您已经导出了初始组件和连接的组件。您可能已经导入了初始组件，因为 setAlert 道具不可用（未连接）。

您需要更改从“named”导入：

import { Register } from './components';

为“默认”：

import Register from './components';

未处理的拒绝 (TypeError)：props.setAlert 不是函数

Unhandled Rejection (TypeError): props.setAlert is not a function

javascript

jsx

reactjs

redux

axios