javascript - 我的反应应用程序中的消息如何解决这个问题
问题描述
它一直在反应中向我显示这条消息,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);
解决方案
在使用 Redux 时,不要在组件中以这种方式导出。
更改如下:
export const Register = props => {...}
对此:
const Register = props => {...}
您将需要在 App.js 中修改此组件的导入。
更改如下:
import { Register } from '...';
对此:
import Register from '...';
推荐阅读
- oracle - 如何在 where 条件下使用 app_user
- python - 如何将 API 响应转换为 JSON 对象?
- azure - Azure 策略将额外资源报告为不合规
- python-3.x - 根据不同条件替换值
- swift - 同色swift的table view和tableview cell
- mysql - 这个 SQL 是如何实现 'row_number' 功能的?
- java - 在自定义原生模块中访问 AppCompatActivity
- javascript - 传递对象时防止在 PureComponent 上重新渲染
- python - tensorflow.python.framework.errors_impl.InvalidArgumentError:节点“input_1”和“input_1”之间的请求张量连接将创建一个循环
- android-studio - Kotlin 的自动完成功能不显示任何父方法