Javascript 反应管理中的ArrayInput验证

嗯，我是react的新手，但我正在尝试验证两个日期（我使用dayjs作为日期）

我想检查“收件人”字段中的日期是否在“发件人”字段中的另一个日期之前

我在一个名为

regex.js

的文件中有以下内容：

    export const validateFromBeforeTo = (values) => { 
    const message = "error: date in field 'to' cant be before date in field 'from'";
    console.log((dayjs(values[0].from).diff(dayjs(values[0].to)) < 0 )? "false" : "true");
    return (dayjs(values[0].from).diff(dayjs(values[0].to)) < 0 )? undefined : message
    }

我的问题是，如果我

console.log

更改了结果，当我更改了正确打印的日期时，它不会在表单中显示错误。

---

我做错了什么？

我认为ArrayInput不会处理自身的错误，而是处理其子代的错误。但是您可以使用

FormDataConsumer

进行更好的通用验证，例如使用数字而不是日期，以更清晰：

import React from "react";
import {
  ArrayInput,
  Edit,
  FormTab,
  FormDataConsumer,
  NumberInput,
  SimpleFormIterator,
  TabbedForm
} from "react-admin";

const validateFromBeforeTo = (scopedFormData) => {
  return (value, allValues) => {
    console.log({ value, allValues, scopedFormData });
    const { to } = scopedFormData;
    const message =
      "error: date in field 'to' cant be before date in field 'from'";

    if (value - to > 0) {
      return message;
    }

    return undefined;
  };
};

const validateFifteenMin = () => {
  // anything
  return undefined;
};

const composeValidate = (scopedFormData) => [
  validateFifteenMin,
  validateFromBeforeTo(scopedFormData)
];

const PostEdit = (props) => {
  return (
    <Edit {...props}>
      <TabbedForm initialValues={{ availability: [{ from: 0, to: 0 }] }}>
        <FormTab>
          <ArrayInput source="availability">
            <SimpleFormIterator>
              <FormDataConsumer>
                {({ scopedFormData, getSource }) => (
                  <>
                    <NumberInput
                      label="Da"
                      source={getSource("from")}
                      validate={composeValidate(
                        scopedFormData
                      )}
                    />
                    <NumberInput label="A" source={getSource("to")} />
                  </>
                )}
              </FormDataConsumer>
            </SimpleFormIterator>
          </ArrayInput>
        </FormTab>
      </TabbedForm>
    </Edit>
  );
};

export default PostEdit;

从“React”导入React；
进口{
ArrayInput，
编辑
表格，
FormDataConsumer，
数字输入，
简单验证器，
选项卡式
}从“react admin”；
常量validateFromForeTo=（scopedFormData）=>{
返回（值，所有值）=>{
log（{value，allValues，scopedFormData}）；
常量{to}=scopedFormData；
常量消息=
“错误：“收件人”字段中的日期不能早于“发件人”字段中的日期”；
如果（值-到>0）{
返回消息；
}
返回未定义；
};
};
const validateFifteenMin=（）=>{
//任何事
返回未定义；
};
常量composeValidate=（scopedFormData）=>[
验证fteenmin，
ValidateFromForeTo（scopedFormData）
];
常量PostEdit=（道具）=>{
返回(
我认为ArrayInput不会在自身上处理错误，而是在其子代上处理错误。但是您可以使用
FormDataConsumer
进行更好的通用验证，如下面的示例，使用数字而不是日期来更清楚地说明：

import React from "react";
import {
  ArrayInput,
  Edit,
  FormTab,
  FormDataConsumer,
  NumberInput,
  SimpleFormIterator,
  TabbedForm
} from "react-admin";

const validateFromBeforeTo = (scopedFormData) => {
  return (value, allValues) => {
    console.log({ value, allValues, scopedFormData });
    const { to } = scopedFormData;
    const message =
      "error: date in field 'to' cant be before date in field 'from'";

    if (value - to > 0) {
      return message;
    }

    return undefined;
  };
};

const validateFifteenMin = () => {
  // anything
  return undefined;
};

const composeValidate = (scopedFormData) => [
  validateFifteenMin,
  validateFromBeforeTo(scopedFormData)
];

const PostEdit = (props) => {
  return (
    <Edit {...props}>
      <TabbedForm initialValues={{ availability: [{ from: 0, to: 0 }] }}>
        <FormTab>
          <ArrayInput source="availability">
            <SimpleFormIterator>
              <FormDataConsumer>
                {({ scopedFormData, getSource }) => (
                  <>
                    <NumberInput
                      label="Da"
                      source={getSource("from")}
                      validate={composeValidate(
                        scopedFormData
                      )}
                    />
                    <NumberInput label="A" source={getSource("to")} />
                  </>
                )}
              </FormDataConsumer>
            </SimpleFormIterator>
          </ArrayInput>
        </FormTab>
      </TabbedForm>
    </Edit>
  );
};

export default PostEdit;

从“React”导入React；
进口{
ArrayInput，
编辑
表格，
FormDataConsumer，
数字输入，
简单验证器，
选项卡式
}从“react admin”；
常量validateFromForeTo=（scopedFormData）=>{
返回（值，所有值）=>{
log（{value，allValues，scopedFormData}）；
常量{to}=scopedFormData；
常量消息=
“错误：“收件人”字段中的日期不能早于“发件人”字段中的日期”；
如果（值-到>0）{
返回消息；
}
返回未定义；
};
};
const validateFifteenMin=（）=>{
//任何事
返回未定义；
};
常量composeValidate=（scopedFormData）=>[
验证fteenmin，
ValidateFromForeTo（scopedFormData）
];
常量PostEdit=（道具）=>{
返回(
也许您可以向我们提供整个表单的来源，以确保根目录上没有错误level@KiaKaha嗯，只有一个表单标签，但无论如何，我更新了block，也许你可以向我们提供整个表单的源代码，以确保root上没有问题level@KiaKaha虽然只有一个表单标签，但我还是更新了街区