我试图在用户提交表单时调度一个操作。假设我有一个提交按钮,它会触发表单上的
onSubmit
事件(最终会在处理表单请求时显示一个微调器图标,但此时,提交按钮仅显示 true
或 false
表示是否显示微调器的值)。
LoginPage.js
import React from 'react';
import { Link } from 'react-router-dom';
export class LoginPage extends React.Component {
constructor(props) {
super(props);
this.handleLogin = this.handleLogin.bind(this);
}
handleLogin(e) {
e.preventDefault();
let email = document.getElementById('userEmail').value;
let password = document.getElementById('userPassword').value;
this.props.loginHandler(email, password);
}
render() {
return (
<form onSubmit={ this.handleLogin }>
<input type="submit" value={ this.props.requestingLogin } />
</form>
);
}
}
export default LoginPage;
LoginPageContainer.js
import React from 'react';
import { connect } from 'react-redux';
import LoginPage from '../../components/login/LoginPage';
import { loginUser } from '../../actions';
export class LoginPageContainer extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<LoginPage requestingLogin={ this.props.requestingLogin } loginHandler={ this.props.loginUser } />
);
}
}
const mapStateToProps = state => {
const { loginUserReducer } = state;
return {
requestingLogin: loginUserReducer.isRequestingLogin,
};
};
const mapDispatchToProps = dispatch => {
return {
loginUser: (email, password) => {
dispatch(loginUser(email, password));
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(LoginPageContainer);
actions/
中的index.jsexport const REQUEST_LOGIN = 'REQUEST_LOGIN';
function requestLogin() {
return {
type: REQUEST_LOGIN,
};
};
export const loginUser = (email, password) => {
return dispatch => {
// this works because when the button is clicked,
// I can successfully console log in here.
dispatch(requestLogin); // THIS DISPATCH IS NOT WORKING
// API call here...
}
};
reducers/
中的index.jsimport { combineReducers } from 'redux';
import { REQUEST_LOGIN } from '../actions';
const initialLoginState = {
isRequestingLogin: false,
};
function loginUserReducer(state = initialLoginState, action) {
switch(action.type) {
case REQUEST_LOGIN:
return Object.assign({}, state, { isRequestingLogin: true });
default:
console.log('returned from default');
return state;
}
}
const allReducers = combineReducers({
loginUserReducer,
});
export default allReducers;
奇怪的是,我在
dispatch()
内的 loginUser()
之后进行的 API 调用有效,但 dispatch()
不起作用。
我在网上看过很多教程,我的代码与我所看到的相符,但由于某种原因,我无法弄清楚为什么调度操作不起作用。任何帮助将不胜感激。
问题就在这里:
const mapDispatchToProps = dispatch => {
return {
loginUser: (email, password) => {
dispatch(loginUser(email, password)); [DISPATCH ACTION]
}
}
};
所以loginUser是一个接受电子邮件、密码并调用dispatch(loginUser(email,password))的函数
但是 loginUser(email,password) 不返回操作,而是返回一个函数。
export const loginUser = (email, password) => {
return dispatch => {
// this works because when the button is clicked,
// I can successfully console log in here.
dispatch(requestLogin); // THIS DISPATCH IS NOT WORKING
// API call here...
}
};
因此
[DISPATCH ACTION]
行不会调度一个动作,而是调度一个函数。
为了使其正确,您可以进行如下更改:
const mapDispatchToProps = dispatch => {
return {
loginUser: (email, password) => {
loginUser(email, password)(dispatch);
}
}
};
因此,loginUser返回一个函数,您可以使用dispatch作为参数来调用它。但好像不太好看。如何正确做?
export const loginUser = dispatch => {
return (email, password) => {
// this works because when the button is clicked,
// I can successfully console log in here.
dispatch(requestLogin()); // THIS DISPATCH IS NOT WORKING
// API call here...
}
};
在mapDispatchToProps中:
const mapDispatchToProps = dispatch => {
return {
loginUser: loginUser(dispatch)
}
};
以一种非常奇怪的方式,我也遇到了同样的问题。按钮内的图像元素阻止了调度,但单击函数内的任何其他逻辑都运行良好。我注意到,当我单击没有图像元素的按钮时,调度正在工作。令人惊讶的是,这不是 z-index 的问题。因为只有代码的调度部分被阻止,而 onclick 函数内的其他所有内容都工作得非常好。希望这与您的情况有关。