解决错误消息错误：架构不包含路径：pinach。（失败位置：未定义类型：“Object”）

Question

>

这是披萨表单。

单击收音机选择酱汁时，页面崩溃。

用户需要为订单命名。

则只能选择1种酱料。

然后选择浇头

然后提交。

应该只能在“名称”字段和所选内容被选中后提交。

然后验证表单？

从“React”导入React,{useState,useEffect}；

从“yup”导入*为yup；

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

ID：yup.string（）.required（“required”）,

姓名：yup

.string()

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

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

类型：yup

.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[errors,setErrors]=useState（{

id: "",

name: "",

type: "",

value: "",

addOns: "",

}）；

常量[buttonDisabled,setButtonDisabled]=Ustate（true）；

const validate=(e)=>{

常量值=

e.target.type===“checkbox”？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],

    });

  });

}；

//formSubmit函数

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函数

常量handleChange=(e)=>{

e.persist();

setFormState({

  ...formState,

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

});

}；

//使用效果函数

useEffect(()=>{

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抱怨的一些房产。