form.js:24 未捕获的类型错误：无法解构“e.target”的属性“名称”，因为它未定义

Question

我收到一些错误，说无法解构 e.target 未定义的属性“名称”，我将不胜感激。 无法在输入字段中分配任何值。 我需要注册为客户，但是当我输入他们无法分配的值时，我该怎么办？

export const Form = ({ sx, onSubmit }) => {
      const [form, setForm] = useState({
        email: {value: "", error: null},
        password: {value: "", error: null},
        role: roles.client,
      });

      const [errors, setErrors] = useState({
        email: null,
        password: null,
        role: null,
      });

      const handleChange = (e) => {
        const { name, value } = e.target;

        setForm({ ...form, [name]: value });

        // authValidators[name]({
        //   value,
        //   cb: (error) => setErrors((prev) => ({ ...prev, ...error })),
        // });
      };

      const handleSubmit = () => {
        // for (let key in form) {
        //   if (key === "role") continue;
        //   // authValidators[key]({
        //   //   value: form[key],
        //   //   cb: (error) => setErrors((prev) => ({ ...prev, ...error })),
        //   // });
        // }

        for (let key in form) {
          if (form[key].length === 0 || errors[key]) {
            return;
          }
        }

        onSubmit(form);
      };

      return (
        <Box sx={sx.root}>
          <EmailInput
            sx={sx.input}
            valueObj={form.email}
            error={errors.email !== null}
            errorMessage={errors.email}
            onChange={handleChange}
          />
          <PasswordInput
            sx={sx.input}
            valueObj={form.password}
            error={errors.password !== null}
            errorMessage={errors.password}
            onChange={handleChange}
          />
          <GroupToggleField
            sx={sx.toggleButton}
            value={form.role}
            onChange={(value) => setForm({ ...form, role: value })}
            options={options}
          />
          <Button sx={sx.button} onClick={handleSubmit}>
            Sign In
          </Button>
        </Box>
      );
    };

    const options = [
      { value: roles.client, title: "Client" },
      { value: roles.member, title: "Crew Member" },
    ];

我还为 email 和密码分别编写了代码，这是我的 email 代码：

export const EmailInput = ({
      fieldname,
      label,
      placeHolder,
      valueObj,
      onChange,
    }) => {
      const handleChange = ({ target: { value } }) => {
        let error = null;

        const re = /\S+@\S+\.\S+/;
        if (!re.test(value)) {
          error = `${label} proper email address`;
        }

        if (value.length === 0) {
          error = `${label} field cannot be empty`;
        }

        onChange(fieldname, { value, error });
      };

      return (
        <TextField
          onFocus={handleChange}
          onChange={handleChange}
          value={valueObj.value}
          error={valueObj.error !== null}
          helperText={valueObj.error}
          label={label}
          placeholder={placeHolder}
          margin="normal"
          size="small"
          fullWidth
        />
      );
    };

这是我的密码：

export const PasswordInput = ({ valueObj, onChange }) => {
      const [showPassword, setShowPassword] = useState(false);

      const handleShowPassword = () => setShowPassword((prev) => !prev);

      const handleChange = ({ target: { name, value } }) => {
        let error = null;

        if (value.length <= 5) {
          error = "Password must be minimum 6 characters";
        }

        if (value.length === 0) {
          error = "Password field cannot be empty";
        }

        onChange(name, { value, error });
      };

      const toggle = (
        <InputAdornment position="end">
          <IconButton onClick={handleShowPassword} edge="end">
            {showPassword ? (
              <VisibilityOff fontSize="small" />
            ) : (
              <Visibility fontSize="small" />
            )}
          </IconButton>
        </InputAdornment>
      );

      return (
        <TextField
          onFocus={handleChange}
          onChange={handleChange}
          value={valueObj.value}
          error={valueObj.error !== null}
          helperText={valueObj.error}
          InputProps={{ endAdornment: toggle }}
          type={showPassword ? "text" : "password"}
          label="Password"
          name="password"
          margin="normal"
          size="small"
          fullWidth
        />
      );
    };

Answer 1

这里有很多东西，所以我先快速通过。

让我们看看您的EmailInput组件。 它以onChange作为道具。 当内部TextField组件遇到"change"事件时，它会调用内部 function EmailInput > handleChange ； 这反过来调用任何 function 在onChange道具中传递给EmailInput组件。

所以在EmailInput中，这一行调用了 function 作为道具传递给onChange的任何内容：

onChange(fieldname, { value, error });

所以第一个参数是fieldname ，它可能是一个字符串。 第二个参数是具有属性value和error的 Object 。 什么 function 被称为？ 让我们看看您的Form组件：

const handleChange = (e) => {
  const { name, value } = e.target;

  setForm({ ...form, [name]: value });

  // authValidators[name]({
  //   value,
  //   cb: (error) => setErrors((prev) => ({ ...prev, ...error })),
  // });
};

// ... Skip a few lines...

  <EmailInput
    sx={sx.input}
    valueObj={form.email}
    error={errors.email !== null}
    errorMessage={errors.email}
    onChange={handleChange}
  />

所以你看， handleChange是我们在调用onChange时在EmailComponent中调用的实际 function。 现在， handleChange只接受一个参数“ e ”，尽管如您在上面看到的，我们传递了两个参数。 此外，似乎期望e是具有target属性的 Object ，但它实际上是一个字符串fieldname 。

因此， Form组件内的handleChange function 应如下所示：

const handleChange = (fieldName, { value }) => {
  setForm({ ...form, [fieldName]: value });
};

您可能会遇到问题，因为我没有看到您将fieldname属性提供给EmailInput ； 也许在这里添加这样的东西：

  <EmailInput
    fieldname="email" // Add this line
    sx={sx.input}
    valueObj={form.email}
    error={errors.email !== null}
    errorMessage={errors.email}
    onChange={handleChange}
  />