Starck43
@Starck43
Web разработчик (Python, PHP, SQL + frontend )

Почему пропадают статические данные после перерисовки компонента?

Я использую nextjs и генерирую статику с помощью getStaticProps. Затем их передаю в соответствующий компонент через пропсы, а дальше после перерисовки компонента (меняю размер экрана) данные становятся пустыми. Как их сохранить, если useState не помогает?

//index.js
import React from 'react'
const AsyncCustomers = dynamic(() => import('~/components/customers/Customers'))

const HomePage = (props) => {
	return(
	<Layout>
		<AsyncCustomers customers={props.customers}/>
	</Layout>
)}

export default HomePage

export const getStaticProps = async () => {
	const customers = await fetch(process.env.API_SERVER + 'customers')
	return {
		props: {
			customers : await customers.json(),
		},
	}
}

//Customers.js
import React, {useState, useEffect, useLayoutEffect} from 'react'
import { getWindowDimensions } from '~/core/helpers/utils'

const getPageCount = () => {
	const [count, setPageCount] = useState(1)

	const handleResize = () => {
		let width = getWindowDimensions().width
		let n = (width < 576) ? 1 : (width < 768) ? 2 : (width < 992) ? 3 : 4
		setPageCount(n)
	}

	useLayoutEffect(() => {
		handleResize()
		window.addEventListener('resize', handleResize)
		return () => window.removeEventListener('resize', handleResize)
	},[])

	return count
}


const Customers = ({customers}) => {
	const [array, setArray] = useState([]) //хранение массива customers для использования после изменения счетчика страниц
	const [customersFormatted, setCustomersFormatted] = useState([]) // хранение обновленного масива заказчиков, разбитого на страницы
	const [pageCount, setCount] = useState(1)

	const count = getPageCount() // получаю количество страниц с клиентами
	if (pageCount != count) {
		setCount(count)
	}

	useEffect(() => {
		setArray(customers) //<--- здесь данные сохраняются
	},[])

	useEffect(() => {
		console.log(array); // <--- здесь массив уже пустой после изменения счетчика страниц
		setCustomersFormatted(Array(Math.ceil(array.length/pageCount)).fill().map(_ => array.splice(0, pageCount)))
	},[pageCount])

	return (customersFormatted.length > 0 &&
	<Section>
			{customersFormatted.map((row, index) => (
				<div key={`row-${index}`} className="row">
					<Items customers={row} />
				</div>
			))}
	</Section>
)}

export default Customers
  • Вопрос задан
  • 37 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы