tl;博士:在登录表单中,this.props
尽管我在 mapDispatchToProps 中传递了操作,但未定义。
我在 connect
中设置了断点函数,并且该操作将其变为连接函数,但无论出于何种原因,在 handleSubmit
函数,this.props 未定义。
我难住了。
我有一个单独的“注册”流程,与我在下面的流程基本相同,而且效果很好。
我基本上复制粘贴了注册代码,并将所有内容重命名为“登录”,并稍微修改了一些内容,无论出于何种原因 this.props 是未定义的,即使我传递给 mapDispatchToProps 的内容似乎是正确的。
组件:
import React from 'react';
import { connect } from 'react-redux';
import { loginSubmit, loginUpdateField } from '../../redux/actions/login.actions';
import { TextInput } from '../../stories/TextInput';
import { Button } from '../../stories/Button';
export class LoginForm extends React.Component {
// eslint-disable-next-line
constructor(props) {
super(props);
}
handleSubmit(event) {
event.preventDefault();
console.log('Props: ', this.props); // UNDEFINED!!!!!!
}
handleUpdateField(field, value) {
// this.props.updateField(field, value);
}
render() {
return (
<form style={{ 'WebkitPerspective': '1000' }}>
<TextInput label="Username" id="username" /> <br />
<TextInput label="Password" id="password" type="password" /> <br /><br />
<Button disabled={false} primary size="medium" onClick={this.handleSubmit.bind(this)} label="Ready for Takeoff" />
<Button disabled={false} size="medium" onClick={() => alert} label="Cancel" />
</form>
);
}
}
export default connect(
null,
{ loginSubmit, loginUpdateField }
)(LoginForm);
那个行动:export const loginSubmit = (fieldValues) => {
return dispatch => {
dispatch(loginSubmitBegin);
let errors = isFormValid(fieldValues);
if (!errors.formValid) {
dispatch(loginErrors(errors));
} else {
axios
.post(`https://api.mydomain.io/login`, fieldValues, { headers: { "Access-Control-Allow-Origin": "*", } })
.then(res => {
dispatch(loginSuccess({ username: 'testuser' }));
})
.catch(err => {
handleErr(err.response.data.error);
});
}
}
};
reducer :const initialState = {
loginStatus: 'not_started',
fieldValues: {
username: '',
password: '',
},
errors: {
formValid: false,
username: [],
password: [],
}
};
export default function (state = initialState, action) {
switch (action.type) {
case 'LOGIN_UPDATE_FIELD':
let newState = {
...state,
};
newState.fieldValues[action.payload.fieldName] = action.payload.fieldValue;
return newState;
case 'LOGIN_SUBMIT_BEGIN':
return {
...state,
signupStatus: 'pending'
};
case 'LOGIN_ERRORS':
return {
...state,
signupStatus: 'errors',
errors: action.payload
};
case 'LOGIN_SUCCESS':
return {
...state,
signupStatus: 'success'
};
default:
return state;
}
}
组合 reducer :import { combineReducers } from 'redux';
import signup from './signup.reducers';
import user from './user.reducers';
import login from './login.reducers';
export default combineReducers({ login, user, signup});
登录页面.jsimport React from 'react';
import PropTypes from 'prop-types';
import { LoginForm } from '../features/LoginForm';
import './signup.css';
export const LoginPage = () => {
return (
<article>
<section>
<h2>Login!!</h2> <br /> <br />
<LoginForm />
</section>
</article>
);
};
LoginPage.propTypes = {
user: PropTypes.shape({})
};
LoginPage.defaultProps = {
user: null,
};
最佳答案
如果您从此组件导入命名导出,那么您正在导入未连接的组件:
import { LoginForm } from "./LoginForm";
由于 redux-connected 组件是默认导出,因此如果您希望它是 redux-connected 版本,则必须确保导入默认导出。import LoginForm from "./LoginForm";
将来避免此错误的一种方法是甚至不导出未连接的LoginForm
。零件。换句话说,您可以将类声明为 class LoginForm extends React.Component { ... }
而不是 export class LoginForm extends React.Component { ... }
.
关于javascript - 当我将操作传递给 mapDispatchToProps 时,为什么 this.props 未定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63786137/