时间戳

首页 > 解决方案 > 对象数组比较 2 个元素值

javascript - 对象数组比较 2 个元素值

问题描述

我正在尝试进行字段验证，并且在比较同一对象数组中的 2 个元素值的情况下陷入困境。有人可以解释一下它是如何完成的吗？我希望在一次迭代中比较密码和 repPassword 值。

export const fieldsConfig = [
  {
    id: "email",
    label: "email",
    value: "",
    error: false,
    helperText: "email must includes chars: @ and .",
  },
  {
    id: "userName",
    label: "user name",
    value: "",
    error: false,
    helperText: "user name must be min 5 char",
  },
  {
    id: "password",
    label: "password",
    value: "",
    error: false,
    helperText: "password must be min 5 chars",
  },
  {
    id: "repPassword",
    label: "rep-password",
    value: "",
    error: false,
    helperText: "passwords not mutch",
  },
];

这是我的 redux 状态，我正在尝试检查字段值并为每个字段进行验证：

case FIELDSVALIDATION:
      const validationFields = [...state.fields].map((element, index, arr) => ({
        id: element.id,
        label: element.label,
        value: element.value,
        error:
          element.id === "email" &&
          !/(.+)@(.+){2,}\.(.+){2,}/.test(element.value)
            ? (element.error = true)
            : element.value.length < 5
            ? (element.error = true)
            : (element.error = false),
        helperText: element.helperText,
      }));
      return {
        ...state,
        fields: validationFields,
      }

我正在使用材料 UI 中的输入字段表单。这是组件的一部分以及我如何实现它：

const state = useSelector((state) => state.regReducer);
  const dispatch = useDispatch();
  
  return (
    <div className="registration">
      {state.fields.map((element, key) => {
        return (
          <TextField
            key={key}
            id={element.id}
            label={element.label}
            value={element.value}
            error={element.error}
            helperText={element.error ? element.helperText : ""}
            onChange={(e) =>
              dispatch(onChangeHandler(e.target.id, e.target.value))
            }
          />
        );
      })}

标签： javascriptreactjsreact-redux

解决方案

您可以尝试添加一个自定义函数来搜索状态中的字段并比较它们的当前值：

   <div className="registration">
      {state.fields.map((element, key) => {
        const generateError = () => {
          if (element.id.includes("password")) {
            const password = state.fields.find(el => el.id == "password");
            const repPassword = state.fields.find(el => el.id == "repPassword");

            if (password.value != repPassword.value) {
              return true;
            } else {
              return false;
            }
          } else return element.error;
        };

        return (
          <TextField
            key={key}
            id={element.id}
            label={element.label}
            value={element.value}
            error={generateError}
            helperText={element.error ? element.helperText : ""}
            onChange={e =>
              dispatch(onChangeHandler(e.target.id, e.target.value))
            }
          />
        );
      })}
    </div>

推荐阅读