Jadi saya memiliki korsel posting yang sangat sederhana ini saya buat dengan next.js / react dan chakra-ui untuk blog, yang tidak menggunakan lib atau komponen eksternal dan tampaknya berfungsi dengan baik sampai beberapa tempat saya mencoba menerapkan Responsif menggunakan chakra's useBreakpointValues() untuk mengembalikan format yang berbeda pada setiap titik. Saya mencoba untuk tetap sederhana, jadi saya memutuskan untuk hanya menggunakan Chakra dan bereaksi untuk ini.

EDIT: Karena @ggorlen ditunjukkan, masalah ini tidak ditulis dengan benar. Jadi saya membuat ini reproduksi kecil berisi hanya yang diperlukan untuk logika Carouse ini, berharap Ini akan membantu mengilustrasikan masalahnya. Hanya ada index.js dengan korsel dan beberapa komponen yang dikomentari. Hanya berikutnya.js dan chakra-ui digunakan.

Konten tersebut diumpankan melalui Sanity API dan disaring berdasarkan kategori menggunakan konteks

const postsByCategories = posts.filter(el => el.categorias.find(item => item.slug === selected))

Dalam pengaturan ini, tata letak untuk perubahan korsel dengan lebar tampilan menggunakan penggunaan penggunaan penggunaan (), sehingga akan memiliki empat posting yang ditampilkan pada layar yang lebih besar, tiga pada snecters, dua di ponsel.

Inilah tampilannya sekarang di monitor besar saya. masukkan deskripsi gambar di sini

Logika di baliknya sederhana: panjang postbycategories dibagi dengan berapa banyak posting setiap breakpoint diizinkan untuk ditampilkan dan kemudian dibulatkan. Ini akan digunakan untuk mengubah status pada setiap kategori.

const breakpointValue = useBreakpointValue({xs: 1, sm: 2, lg: 3, xl: 4}) // this is a chakra-ui/react function
const [maxValue, setMaxValue] = useState(1); // at least one post will be shown, so this state is started like this. It doesn't matter, really
useEffect(() => { // this does the calculation for each category
        setMaxValue(Math.ceil(postsByCategories.length / breakpointValue ));
      })

Dengan cara ini saya dapat mengatur sepasang fungsi kecil untuk mengubah halaman menggunakan hanya jumlah dan pengurangan untuk setiap tombol.

const handleClickUp = () => {
        if (count == maxValue) {
          null
        } else {
          setCount(count + 1)
        }
      }
const handleClickDown = () => {
        if (count == 1) {
          null
        } else {
          setCount(count - 1)
        }
      }

Sekarang saya dapat melakukan siklus melalui halaman di setiap breakpoint, menggunakan fungsi sederhana untuk transform alat peraga pada elemen carousel--items, yang akan menggeser konten dalam jendela kotak induk yang menyembunyikan apa yang terburuk:

<Box
  className="carrousel--wrapper"
  w="100%"
  overflow="hidden"
 >
 <Flex
   className="carrousel--items"
   flexDir={[
    'column',
    ,
    "row"
    ]}
    wrap="nowrap"
    transition="all .15s ease-in-out"
    transform={[
     `translateX(calc(-100% * ${count-1}))`
    ]}
    justifyContent="flex-start"
    w={maxValue > 1 ? "fit-content" : '100%'}
   >
     {postsByCategories.map((post, i) => {
       return (
         <PostBox
           flex="0 0 "
           flexBasis={[
            '100%',
            ,
            'calc(50% - .5rem)',
            'calc(33% - .5rem)',
            'calc(25% - .5rem)'
          ]}
          key={i}
          post={post}
          mx={1}
          />
          )
      })}
  </Flex>
</Box>

Dan itu bekerja dengan baik.

Namun, saya menggunakan trik sederhana untuk menghasilkan titik-titik navigasi di bawah posting, yang merupakan array item yang tidak terdefinisi yang akan memuat jumlah titik sesuai nomor halaman.

{[...Array(3)]
  .map((item, i) => {
    return <Dots />
  })}

Tidak ada alasan untuk menggunakan tiga di sana. Hanya terlihat bagus untuk menyelaraskan sesuatu. Tetapi kemudian idenya adalah mengubahnya untuk maxValue dan memiliki jumlah titik yang tepat untuk setiap kategori.

Namun, sepertinya saya tidak bisa menggunakan keadaan ini untuk mengambil fungsi peta ini. masukkan deskripsi gambar di sini

Dan saya telah menguji MaxValue pada konsol. Ini mengembalikan yang tepat saat menggunakan 3 sebagai nilai untuk [...Array()]

enter image description here

Tetapi nan untuk [...Array(maxValue)]

enter image description here

Saya tidak begitu mengerti mengapa itu tidak berhasil. Dugaan saya adalah ada hubungannya dengan cara Array() tetapi saya sepertinya tidak dapat menemukan masalah sendirian. Mungkin aku kehilangan sesuatu di sini.

Apakah ada yang salah dengan proposisi yang harus saya ketahui? Terima kasih sebelumnya

1
Eduardo Oliveira 4 April 2021, 00:57

1 menjawab

Jawaban Terbaik

Saya telah menemukan masalah dari reproduksi kecil Anda.

Dari overrides Anda, saya menemukan masalahnya. Tampaknya objek gaya melanggar breakpoint yang telah Anda tetapkan pada extendTheme Anda.

const overrides = extendTheme({
  // breakpoints should be after the styles object
  breakpoints,
  styles: {
    global: {
      html: {
        fontSize: "21px",
        lineHeight: "32px"
      }
    }
  },
});

Cukup pindahkan breakpoint Anda setelah gaya.

const overrides = extendTheme({
  styles: {
    global: {
      html: {
        fontSize: "21px",
        lineHeight: "32px"
      }
    }
  },
  // all good 👍
  breakpoints,
});

Saya juga ingin menunjukkan bahwa Anda memiliki satu komentar dengan useEffect di bawah PanelContent.

// Ini akan mengatur N # halaman di mount

Jika Anda ingin efek hanya berjalan di mount, Anda mungkin ingin menambahkan daftar ketergantungan kosong. useEffect(() => {}, []).

EDIT: Mengubah [...Array(maxValue)].

const breakpointValue = useBreakpointValue({
    sm: 0,
    md: 1,
    lg: 2,
    xl: 3,
    "2xl": 4
  });

Saya telah mengubah efek penggunaan Anda untuk melakukan hal berikut. Ini harus menghasilkan titik-titik Anda secara dinamis pada PanelContent}

useEffect(() => {
  // this will set the n# of pages on mount
  setMaxValue(
    Math.ceil(
      breakpointValue === 0
        ? 1
        : postsByCategories.length / (breakpointValue + 1)
    )
  );
}, []);

KODESANDBOX dengan tetap useBreakpointValue

0
Leomar Amiel 5 April 2021, 04:56