如何解决Redux-form字段值不会更新axios响应中的值,除非我单击它或按任意键
我试图通过Redux-form制作一个注册表单,该表单包括用户输入他们的Zoom邀请链接,或登录Zoom并自动获得邀请链接。 The image of my signup form.有一个初始状态,一个缩放按钮,一个要输入的字段和一个进入表单下一步的按钮。
用户单击“添加到缩放”按钮后,它将要求用户登录(将Axios请求发送到我的后端),返回用户的邀请链接,并通过{设置“ invLink
”状态{1}}然后,字段中的invLink属性将传递到组件“ setInvLink(res.data);
”。然后,“ renderZoomField
”将显示邀请链接作为值。
目前,问题在于邀请链接在字段中呈现时,验证失败,说“ required”,这意味着字段中没有任何值! redux表单不会更新我的邀请链接值!我无法获得新的价值。 但是,当我只单击该字段或按该字段上的任意键时,“必填”就消失了,一切顺利!真是个奇怪的错误!
我记录了该错误!这是Google云端硬盘链接:https://drive.google.com/file/d/1YbJMsNrx_laU69FX6IvLWxu1tUrPPzCP/view?usp=sharing
注:react@16.8.6; react-redux@7.1.3,redux-form@8.1.0
初始状态为空:
TextFieldZoomCustom
“缩放”链接的字段为
import { Field,reduxForm } from "redux-form";
import { connect } from "react-redux";
...
let SignupFormMoreinformationHost = props => {
let [invLink,setInvLink] = React.useState();
...
和组件renderZoomField是:
<Field
name="invLink"
invLink={invLink}
component={renderZoomField}
type="text"
label="Zoom Invitation Link"
spacing={{ width: "80%" }}
placeholder={"sign in to get your link"}
secondaryPlaceholder={secondaryPlaceholder}/>
TextFieldZoomCustom只是样式化的TextField:
export const renderZoomField = ({
input,// value,label,placeholder,invLink,secondaryPlaceholder,type,// autoFocus,Meta: { touched,error }
}) => {
console.log("the input is ",input);
console.log("link ",invLink);
return (
<div>
<NoSsr>
<LabelCustom> {label} </LabelCustom>
<TextFieldZoomCustom
{...input}
value={invLink}
placeholder={placeholder}
type={type}
variant="outlined"
autoComplete={label}
// autoFocus={autoFocus}
/>
<p>{secondaryPlaceholder}</p>
{touched && error && <LabelError> {error} </LabelError>}
</NoSsr>
</div>
);
};
有一个验证:
const TextFieldZoomCustom = styled(TextField)({
width: "80%",....
在js文件的末尾:
function validate(values) {
let errors = {};
if (!values.invLink) {
errors.invLink = "required";
}
return errors;
}
最后,在表单的最后一步,将有一个提交按钮,用于发布axios帖子
export default reduxForm({
form: "signup",destroyOnUnmount: false,validate
})(SignupFormMoreinformationHost);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。