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}
  />