Array.prototype.map() 期望在箭头函数结束时返回一个值

Question

我有这个 array.map() 箭头函数并有以下错误：“Array.prototype.map() 期望在箭头函数数组回调返回的末尾返回一个值”

这是我的代码：

          {productList.map((val) => {
            const category = val.CategoryName;
            // const quantity = val.ProductQuantity
            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>
                );
              }
            }
          })}

我已经阅读了有关该错误的信息，我发现它与需要返回值有关，但我确实有这个错误？

带有修复的代码示例会有所帮助，我认为这很简单。

Answer 1

map必须为每个项目返回一个值。

如果你想做一些过滤，你应该考虑使用Array.prototype.filter()之前，这样你就可以删除地图中的if 。

代码也更容易阅读。

      {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>
            );
      })}

Answer 2

当列出的条件不匹配时，您可以只返回 null：

          {productList.map((val) => {
        const category = val.CategoryName;
        // const quantity = val.ProductQuantity
        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>
            );
          }
         return null;
        }
      })}