微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Redux-form字段值不会更新axios响应中的值,除非我单击它或按任意键

如何解决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 举报,一经查实,本站将立刻删除。