我的反应应用程序中的消息如何解决这个问题答案

【问题标题】：message in my react app how to solve this我的反应应用程序中的消息如何解决这个问题
【发布时间】：2020-06-27 13:16:19
【问题描述】：

它一直在 react, redux 应用程序中向我显示此消息我试图修复它，但没有任何效果，实际上我不知道我的代码有什么问题

未处理的拒绝（TypeError）：props.setAlerts 不是函数

这是我的店

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

这是我的功能

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

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

这是我的减速器

import { SET_ALERT, REMOVE_ALERT } from '../actions/types';

const initialState = [];

export default function(state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case SET_ALERT:
      return [...state, payload];
    case REMOVE_ALERT:
      return state.filter(alert => alert.id !== payload);
    default:
      return state;
  }
}

这是我的动作类型

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

这是我要在其中使用我的功能的组件

import React, { Fragment, useState } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { setAlerts } 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.setAlerts('Password dont match', 'danger');
    } else {
      console.log('Succes');
    }
  };
  return (
    <Fragment>
      <section className='container'>
        <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)}
            />
            <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)}
            />
          </div>
          <div className='form-group'>
            <input
              type='password'
              placeholder='Confirm Password'
              name='password2'
              minLength='6'
              value={password2}
              onChange={e => onChange(e)}
            />
          </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>
      </section>
    </Fragment>
  );
};


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

【问题讨论】：

不是道具，是导入的。只需setAlerts('...')。
我这样做是因为我使用 redux，所以它必须通过连接，然后将其作为道具传递给我的组件
这能回答你的问题吗？ React Redux prop is undefined
与标记的副本一样，您正在执行命名导出和默认导出。这意味着如果您默认导入组件，它将具有connect HOC 提供的额外道具。如果以命名方式导入它，则不会。确保像 import Register from './path/to/Register' 一样导入它
非常感谢布赖恩这是问题

标签： javascript reactjs redux reduce redux-thunk

【解决方案1】：

试试这个：

const mapDispatchToProps = dispatch => {
    return {
      setAlerts : (masg, alertType) => { dispatch(setAlerts (masg, alertType)) }
    }
}


export default connect(null,mapDispatchToProps)(Register)

【讨论】：

它给了我这个错误 Unhandled Rejection (TypeError): props.setAlerts is not a function
你能做一个 console.log(props) 看看你得到了什么输出吗？
它给了我未定义的状态

【解决方案2】：

使用 Redux 时，组件中不要这样导出。

更改如下：

export const Register = props => {...}

到这里：

const Register = props => {...}

您需要在 App.js 中修改此组件的导入。

更改如下：

import { Register } from '...';

到这里：

import Register from '...';

【讨论】：