使用Array.prototype.map()触发箭头函数需返回值报错如何解决？

你代码中的return仅在category === "MotorcycleParts"且val.ProductQuantity !== 0两个条件同时满足时才会执行，当类别不匹配、商品库存为0时，回调函数没有返回任何值，触发了array-callback-return的ESLint校验规则。

方案1：补全所有分支的返回值 #

直接在回调函数末尾添加return null，覆盖所有未匹配条件的场景：

{productList.map((val) => {
  const category = val.CategoryName;
  if (category === "MotorcycleParts") {
    if (val.ProductQuantity !== 0) {
      return (
        <div>
          <div>
            <div class="buyNowBtnDiv">
              {localStorage.getItem("username") === "" ||
              localStorage.length === 0 ? (
                <div id="buyAddBtn">
                </div>
              ) : (
                <div id="buyAddBtn">
                </div>
              )}
            </div>
          </div>
        </div>
      );
    }
  }
  // 新增：未匹配条件时返回null
  return null;
})}

方案2：先过滤再遍历（性能更优） #

先通过filter筛选出符合条件的商品，再用map渲染，避免无意义的遍历判断：

{productList
  .filter(val => val.CategoryName === "MotorcycleParts" && val.ProductQuantity !== 0)
  .map((val) => {
    return (
      <div>
        <div>
          <div class="buyNowBtnDiv">
            {localStorage.getItem("username") === "" ||
            localStorage.length === 0 ? (
              <div id="buyAddBtn">
              </div>
            ) : (
              <div id="buyAddBtn">
              </div>
            )}
          </div>
        </div>
      </div>
    );
})}

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