解析错误消息错误：架构不包含路径：spinach。（失败于：未定义，类型为：“对象”）

Question

>

导入React，{useState， use效应}从"react"；

从"yup"导入*as yup；

const formSchema=yup.object（）.shape({

id:yup.string（）.required（“required”），

姓名：是的

.string()

.min(2, "You name should have 2 characters")

.required("You don't have a name?"),

类型：是的

.string()

.min(3, "Must be at least 3 characters")

.required("Required"),

值：yup.string（）.required（“required”），

}）；

const PizzaForm=（）=

//管理窗体的状态

const[formState， setFormState]=useState（{

id: "",

name: "",

type: "",

value: "",

addOns: "",

}）；

const[错误，设置错误]=useState（{

id: "",

name: "",

type: "",

value: "",

addOns: "",

}）；

const[buttonDisabled，setButtonDisabled]=useState（true）；

常量验证=（e）=

常数值=

e、 target.type==“复选框”？e、 target.checked：e.target.name；

yup

  .reach(formSchema, e.target.name)

  .validate(e.target.value)

  .then((valid) => {

    setErrors({

      ...errors,

      [e.target.name]: "",

    });

  })

  .catch((err) => {

    setErrors({

      ...errors,

      [e.target.name]: err.errors[0],

    });

  });

};

//表单提交功能

const formSubmit=（e）=

e.preventDefault();

console.log("form submitted!", formState);

};

//onChange函数

const onChange=（e）=

e.persist();

validate(e); /*something wrong here, crashes when a radio is selected*/

console.log(e.target.value, e.target.checked);

const value = e.target.type === "radio" ? e.target.checked : 

e.target.value;

setFormState({ ...formState, [e.target.name]: value });

};

//handleChange函数

常量句柄=（e）=

e.persist();

setFormState({

  ...formState,

  addOns: [formState.addOns, e.target.value],

});

};

//使用效果函数

使用效果（）=

formSchema.isValid(formState).then((valid) => {

  setButtonDisabled(!valid);

});

}，[formState]）；

返回（

<div>

  <form onSubmit={formSubmit}>

    <label htmlFor="name">

      Name Your Pizza:

      <input

        type="text"

        name="name"

        id="name"

        placeholder="Save for future orders!"

        value={formState.name}

        onChange={onChange}

      />

      {errors.name.length > 0 ? (

        <p className="error">{errors.name}</p>

      ) : null}

    </label>

    <h1> Build Your Own Pizza! </h1>

    <label htmlFor="size">

      <h3> What Size Pizza? </h3>

      Pizza Size:

      <select id="psize" name="psize">

        <option value="Small">Small</option>

        <option value="Medium">Medium</option>

        <option value="Large">Large</option>

        <option value="Extralarge">Extra Large</option>

      </select>

    </label>

    <h3> Select Your Sauce: </h3>

    <label htmlFor="redsauce" className="redsauce">

      <input

        type="radio"

        name="redsauce"

        value={formState.name}

        onChange={onChange}

      />

      Original Red

    </label>

    <label htmlFor="garlic" className="garlic">

      <input

        type="radio"

        name="garlic"

        value={formState.name}

        onChange={onChange}

      />

      Garlic Ranch

    </label>


    <label htmlFor="bbq" className="bbq">

      <input

        type="radio"

        name="bbq"

        value={formState.name}

        onChange={onChange}

      />

      BBQ Sauce

    </label>

    <label htmlFor="spinach" className="spinach">

      <input

        type="radio"

        name="spinach"

        value={formState.name}

        onChange={onChange}

      />

      Spinach Alfredo

    </label>

    <h3> Select Your Toppings: </h3>

    <label htmlFor="toppings">

      Toppings: Plain

      <input

        id="toppings1"

        type="checkbox"

        name="addOns"

        value={formState.name}

        onChange={handleChange}

      />

      <h3> Select Your Cheese: </h3>

      Chedder

      <input

        id="toppings2"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Cheese

      <input

        id="toppings3"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Three Cheese

      <input

        id="toppings4"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      ExtraCheese

      <input

        id="toppings5"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      <h3> Select Your Meat: </h3>

      Pepporoni

      <input

        id="toppings6"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Sausage

      <input

        id="toppings7"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Canadian Bacon

      <input

        id="toppings8"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Spicy Italian Sausage

      <input

        id="toppings9"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      GrilledChicken

      <input

        id="toppings10"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      <h3> Select Other Toppings: </h3>

      Onions

      <input

        id="toppings11"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Green Peppers

      <input

        id="toppings12"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Diced Tomatoes

      <input

        id="toppings13"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Black Olives

      <input

        id="toppings14"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Roasted Garlic

      <input

        id="toppings15"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Artichoke Hearts

      <input

        id="toppings16"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

      Pineapple

      <input

        id="toppings17"

        type="checkbox"

        name="addOns"

        onChange={handleChange}

      />

    </label>

    <h3>Any Special Instructions?</h3>

    <label htmlFor="instructions">

      Special Instructions:

      <textarea name="instructions" />

    </label>

    <button disabled={buttonDisabled}>Submit</button>

  </form>

</div>

); };

导出默认PizzaForm；

Answer 1

const formSchema = yup.object().shape({
  id: yup.string().required("Required"),
  name: yup.string().min(2, "You name should have 2 characters")
        .required("You don't have a name?"),
  type: yup.string().min(3, "Must be at least 3 characters").required("Required"),
  value: yup.string().required("Required"),
});

您的模式如下所示。我已经在代码中修复了这个错误，添加了yup抱怨的属性，并根据错误抛出的类型定义了它的类型。在您的例子中，它是object类型的“菠菜”

因此，在您的yup模式中添加以下行：

spinach: yup.object()

如果您认为需要，请按要求设置

spinach: yup.object().required("Required"),

表单包含此字段，而yup架构不包含此字段。

通常我没有注意到模式中需要列出所有属性名。我犯这个错误的时候是在两个模式之间切换以提交完整对象或草稿版本。草稿中没有列出yup抱怨的某些属性。