当我尝试将表单组件连接到 redux 时,我得到一个无限循环。如果它不令人沮丧会很有趣,因为代码今天早些时候工作,而现在在我恢复 1 次提交后它就没有了。
代码几乎相同,并且 connect()() 有效,并且我可以使用 signUserUp 函数作为道具使用。我删除了 node_modules 和 package-lock 以防万一并再次安装,它是一样的。
注册.js
import { connect } from "react-redux";
import signupActions from "../modules/signup";
function Signup() {
return <BasicForm />
}
const BasicForm = () => (
<Formik
initialValues={{ email: "", password: "", confirmPassword: "" }}
validationSchema={signupSchema}
onSubmit={(values, actions) => {
console.log("form data: ", values);
}}
render={({ values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
<Container>
<Form onSubmit={handleSubmit}>
<Form.Input
type="text"
placeholder="Email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
name="email"
/>
{errors.email && touched.email && <div>{errors.email}</div>}
<Form.Input
type="password"
placeholder="Password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
name="password"
/>
{errors.password && touched.password && <div>{errors.password}</div>}
<Form.Input
type="password"
placeholder="Confirm Password"
onChange={handleChange}
onBlur={handleBlur}
value={values.confirmPassword}
name="confirmPassword"
/>
{errors.confirmPassword && touched.confirmPassword && <div>{errors.confirmPassword}</div>}
<Button primary type="submit" onSubmit={handleSubmit} disabled={isSubmitting}>
Submit
</Button>
</Form>
</Container>
)}
/>
);
export default connect(
null,
signupActions
)(Signup);
当我添加连接时,我显然在这里得到了错误......
这是带有 redux 东西 signup.js的单文件模块
import api from '../utils/api';
const SIGN_UP = 'signup/SIGN_UP';
const initialState = {
isAuthenticated: false,
jwt: '',
authError: '',
formErrors: [],
};
export default (state = initialState, action = {}) => {
switch (action.type) {
case SIGN_UP:
return { ...state, isAuthenticated: true, jwt: action.payload, authError: '', formErrors: [] };
default:
return state;
}
};
export const signup = token => ({
type: SIGN_UP,
payload: token,
});
export const signUserUp = credentials => {
return dispatch => api.post('auth/signup', credentials).then(token => dispatch(signup(token)));
};
在rootReducer.js我像这样导入该 signupReducer
import signupReducer from './modules/signup';
export default combineReducers({
signup: signupReducer,
});
这是至少在我尝试访问注册页面时查看错误的代码框示例。