React TypeScript严格模式下modal表单提交对象重名属性编译报错求助

报错根因 #

你遇到的An object literal cannot have multiple properties with the same name in strict mode报错，是错误使用ES6对象属性简写语法导致的：
对象属性简写仅支持传入独立的变量标识符，比如你提前声明const name = pizzaStore.modalProps.name，才能用{name}的简写形式，等价于{name: name}。
你直接在对象字面量中写入pizzaStore.modalProps.name这类带属性访问符.的表达式，不符合简写语法规则，TypeScript在严格模式下解析时会误判为存在重复属性名，因此抛出编译报错。

修复代码 #

把form标签onSubmit事件中传入的对象，改为显式声明键值对的写法即可：

<form 
  className="modal-content-sizes-form" 
  onSubmit={(e: any) => {
    cartStore.handleSubmitForm(e, {
      name: pizzaStore.modalProps.name,
      description: pizzaStore.modalProps.description,
      size: pizzaStore.size,
      price: pizzaStore.price,
      imageUrl: pizzaStore.modalProps.ImageUrl
    })
  }}
>

可选优化 #

你当前的handleSetOption方法存在异步状态取值错误的问题：setSelectedOption是React的异步更新API，调用后立刻读取selectedOption拿到的是更新前的旧值，建议修改为：

const handleSetOption = (e: any) => {
  const currentValue = e.target.value;
  setSelectedOption(currentValue);
  pizzaStore.setSize(currentValue);
  pizzaStore.setPrice(currentValue);
}

内容的提问来源于stack exchange，提问作者aspiringdev