如何将React代码中的if-else三元简写转换为普通if-else条件语句

原正常运行代码 #

const [array, setArray] = useState([]);

function addProduct(product){
  const ProductExist = array.find((item) => item.id === product.id);
  setArray(
   array.map((item) =>
   item.id === product.id
   ? { ...ProductExist, quantity: ProductExist.quantity + 1 }
   : item
   )
  );
}

改写代码报错原因 #

• 语法错误：return关键字后不能直接跟随if语句，if是流程控制语句，不属于可直接返回的表达式
• 变量名不一致：原状态更新方法是setArray，改写时改成了setTestArray导致状态更新失败
• 语法遗漏：array.map的回调函数外层缺少闭合括号

等效普通if-else写法 #

const [array, setArray] = useState([]);

function addProduct(product){
  const ProductExist = array.find((item) => item.id === product.id);
  setArray(
    array.map((item) => {
      // 先做条件判断，再返回对应结果
      if (item.id === product.id) {
        return { ...ProductExist, quantity: ProductExist.quantity + 1 }
      } else {
        return item
      }
    })
  );
}

逻辑说明 #

两段代码逻辑完全一致：遍历数组中的每一项，当当前项id和传入商品id匹配时，返回更新了购买数量的新商品对象，否则返回原商品项，最终生成新数组更新状态。

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