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 (将#修改为@）