reactjs - 订单验证失败：personalDetails.gift：转换为布尔值失败，路径“personalDetails.gift”处的值为“No”

Question

我不断收到我的单选按钮标题中所述的错误。

这就是我声明对象变量的方式。我使用了 initialState 并将 objData 设置为 initialState。所以我设置表单数据以接收来自字段的值。在这种情况下，单选按钮应该是初始状态中的布尔值，现在导致错误。

// creating order object
var initialState = {
  orders: [],
  personalDetails: {
    name: "",
    contactNo: "",
    email: "",
    address: "",
    gift: false
  },
  recipientDetails: {
    name: "",
    contactNo: "",
    email: "",
    address: "",
    message: ""
  },
  isDone: false,
  area: "",
  totalAmount: 12,
  deliveryFee: 5,
  remarks: ""
};

const [formData, setFormData] = useState(initialState)
var [objData] = useState(initialState)
const { personalDetails, orders, recipientDetails, isDone, area, totalAmount, deliveryFee, remarks} = formData

//inputting personal gift
const onChangePersonalGift = e => {
  const { name, value } = e.target;
  objData.personalDetails.gift = value;
  setFormData({
    ...formData,
    personalDetails: {
      ...formData.personalDetails,
      gift: value
    }
  });
};

这就是我完成单选按钮的方式：

    <FormGroup tag="fieldset">
  <Label>
    <FontAwesomeIcon icon="gift" /> Gift?
  </Label>
  <FormGroup check>
    <Label check>
      <Input
        type="radio"
        id="giftYes"
        name="gift"
        onClick={toggleButton}
        value="Yes"
        onChange={e => onChangePersonalGift(e)}
      />{" "}
      Yes
    </Label>
  </FormGroup>
  <FormGroup check>
    <Label check>
      <Input
        type="radio"
        name="gift"
        value="No"
        onChange={e => onChangePersonalGift(e)}
      />{" "}
      No
    </Label>
  </FormGroup>
</FormGroup>

知道是什么导致了错误，或者我该如何纠正这个错误？

标签： reactjs

Answer 1

我在代码沙箱中复制了无线电输入，所以我可以说它不是您共享的代码片段中的任何内容。

但是，您引用的错误Order validation failed: personalDetails.gift: Cast to Boolean failed for value “No” at path “personalDetails.gift” 使我相信您发生了某种形式的验证，并且它期望“礼物”值是（或可转换为）布尔值。“是”和“否”是字符串，如果可以转换为布尔值，它们都是真值。最好将单选按钮的值设置为trueand false，这将与您的initialState数据类型相匹配personalDetails.gift: false。

<FormGroup check>
  <Label check>
    <Input
      type="radio"
      id="giftYes"
      name="gift"
      onClick={toggleButton}
      value={true} // <-- keeps the gift value a boolean
      onChange={onChangePersonalGift}
    />{" "}
    Yes
  </Label>
</FormGroup>
<FormGroup check>
  <Label check>
    <Input
      type="radio"
      id="giftNo"
      name="gift"
      value={false} // <-- keeps the gift value a boolean
      onChange={onChangePersonalGift}
    />{" "}
    No
  </Label>
</FormGroup>

注意：如果它也试图对表单值做任何花哨的事情，您可能需要调整验证逻辑。