是的周期性依赖问题

时间:2018-12-20 10:06:50

标签: reactjs formik yup

我正在尝试验证三个字段之一的初始状态值已更改。如果没有任何更改,则引发错误。字段之一是图像,因此我正在使用隐藏字段在提交时存储图像数据。我是Yup的新手,所以仍然想尝试在这个地方走走的路。我已经尝试了很多事情,尽管无法正常工作。我现在遇到了周期性依赖问题。任何帮助或指导都非常感谢。

SignupSchema = Yup.object().shape({
hidden: Yup.mixed().when(['tagText', 'tagName'], {
      is: (tagText, tagName) => !tagText && !tagName,
      then: Yup.string().test('anything-different-one', 'There are no changes to save, please make sure you have changed at least one field', (value) => {
          if (value === undefined) return true;
          if (this.state.initialFaceSelected.unified !== value.hidden.unified) return true;
          return false;
        })
      })
      .required("Please select an emoji first!"),
    tagName: Yup.string().when(['tagText', 'hidden'], {
      is: (tagText, hidden) => !tagText && !hidden,
      then: Yup.string().test('anything-different-two', 'There are no changes to save, please make sure you have changed at least one field', (value) => {
          if (value === undefined) return true;
          if (this.state.initialFaceSelected.tagName !== value.tagName) return true;
          return false;
        })
      })
      .min(2, "Too Short!")
      .max(15, "Too Long!")
      .test('value-name-exists', '${value} tag name already exists, please choose another', (value) => {
        if (value === undefined) return true;
        let valLower = this.props.tags.data.map((tag) => {
          return tag.tagName.toLowerCase();
        });
        let valValue = valLower.map((tag) => {
          return tag === value.toLowerCase()
        });
        if (valValue.indexOf(true) >= 0 && value !== this.initialValues.tagName) return false;
        return true;
      })
      .required("Required"),
    tagText: Yup.string().when(['hidden', 'tagName'], {
      is: (hidden, tagName) => !hidden && !tagName,
      then: Yup.string().test('anything-different-three', 'There are no changes to save, please make sure you have changed at least one field', (value) => {
          if (value === undefined) return true;
          if (this.state.initialFaceSelected.tagText !== value.tagText) return true;
          return false;
        })
      })
      .test('value-text-exists', '${value} tag text already exists, please choose another', (value) => {
        if (value === undefined) return true;
        let valLower = this.props.tags.data.map((tag) => {
          return tag.tagText.toLowerCase();
        });
        let valValue = valLower.map((tag) => {
          return tag === value.toLowerCase()
        });
        if (valValue.indexOf(true) >= 0 && value !== this.initialValues.tagText) return false;
        return true;
      })
      .min(2, "Too Short!")
      .max(15, "Too Long!")
      .required("Required")
  },[['tagName', 'tagText'], ['tagText', 'hidden'], ['hidden', 'tagName']]);

0 个答案:

没有答案