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

Posted 2023-02-22

【中文标题】我的反应应用程序中的消息如何解决这个问题

【英文标题】：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'

一样导入它

非常感谢布赖恩这是问题

【参考方案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 '...';