反轉 map 並在 map 方法內使用

Question

在 categories.map((category) => () 中，我需要反轉 categories.map 的元素並在創建鏈接之前檢查 category.isFeatured 但它不允許我進行 if 語句。

const Header = () => {
  const [categories, setCategories] = useState([])
  useEffect(() => {
    getCategories().then((newCategories) => setCategories(newCategories))
  }, [])
  return (
    <div className="container mx-auto mb-8 px-10">
      <div className="inline-block w-full border-b border-blue-400 py-8">
        <div className="block md:float-left">
          <span className="cursor-pointer text-4xl font-bold text-white">
            <Link href={'/'}>CRBStuffReviews</Link>
          </span>
        </div>
        <div className="hidden md:float-left md:contents">
          {categories.map((category) => (
            <Link key={category.slug} href={`/category/${category.slug}`}>
              <span className="mt-2 ml-4 cursor-pointer align-middle font-semibold text-white md:float-right">
                {category.name}
                {console.log(category.name)}
              </span>
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}

Answer 1

試試吧：

<div className="hidden md:float-left md:contents">
        {mrGlobalRequest?.map((category) => {
          if (category.isFeatured) 
           
         
          return (
            <div key={category.slug} href={`/category/${category.slug}`}>
              <span className="mt-2 ml-4 cursor-pointer align-middle font-semibold text-white md:float-right">
                {category.name}
                {console.log(category.name)}
              </span>
            </div>
          );
        })}
      </div>

Answer 2

Bravo 在評論中的 Array.reverse 上是正確的。

您還需要在 .map 中添加 {}，檢查 category.isFeatured，並刪除所有空值（否則您將得到空行）。

例如，以下將顛倒順序，如果 category.isFeatured 返回鏈接，否則返回 null。最后它將使用 filter(Boolean) 刪除所有空值 - 一個漂亮的技巧：

import React, { useState, useEffect } from "react";
const Header = () => {
  const [categories, setCategories] = useState([]);
  useEffect(() => {
    getCategories().then((newCategories) => setCategories(newCategories));
  }, []);
  return (
    <div className="container mx-auto mb-8 px-10">
      <div className="inline-block w-full border-b border-blue-400 py-8">
        <div className="block md:float-left">
          <span className="cursor-pointer text-4xl font-bold text-white">
            <Link href={"/"}>CRBStuffReviews</Link>
          </span>
        </div>
        <div className="hidden md:float-left md:contents">
          {categories
            .reverse()
            .map((category) => {
              return category.isFeatured ? (
                <Link key={category.slug} href={`/category/${category.slug}`}>
                  <span className="mt-2 ml-4 cursor-pointer align-middle font-semibold text-white md:float-right">
                    {category.name}
                    {console.log(category.name)}
                  </span>
                </Link>
              ) : null;
            })
            .filter(Boolean)}
        </div>
      </div>
    </div>
  );
};

Answer 3

在map回調function中，需要用大括號

{}

在大括號內，您可以使用 IF 語句

所以，你的代碼看起來像這樣

    const Header = () => {
    const [categories, setCategories] = useState([])
      useEffect(() => {
        getCategories().then((newCategories) => setCategories(newCategories))
      }, [])
      return (
        <div className="container mx-auto mb-8 px-10">
          <div className="inline-block w-full border-b border-blue-400 py-8">
            <div className="block md:float-left">
              <span className="cursor-pointer text-4xl font-bold text-white">
                <Link href={'/'}>CRBStuffReviews</Link>
              </span>
            </div>
            <div className="hidden md:float-left md:contents">
              {categories.map((category) => {
               if(category.isFeatured){
               return(
                <Link key={category.slug} href={`/category/${category.slug}`}>
                  <span className="mt-2 ml-4 cursor-pointer align-middle font-semibold text-white md:float-right">
                    {category.name}
                    {console.log(category.name)}
                  </span>
                </Link>
              )}})}
            </div>
          </div>
        </div>
      )
    }