Мобильная версияКак указано в заголовке, я создаю веб-сайт с использованием NextJS в стиле TailwindCSS. Однако в моем коде есть небольшая и досадная проблема.
Вот мой код ниже для основного содержимого страницы:
"использовать клиент" импортировать React, {useState} из «реагировать»; экспортировать функцию по умолчанию MainContent(){ const [eventTerm, setSearchTerm] = useState(''); const [zipCode, setZipCode] = useState(''); const handleChange = (событие: React.ChangeEvent) => { setSearchTerm(event.currentTarget.value); } const handleZipChange = (событие: React.ChangeEvent) => { setZipCode(event.currentTarget.value); } const handleSubmit = (событие: React.ChangeEvent ) => { событие.preventDefault(); // Выполняем здесь функцию поиска console.log(eventTerm); console.log(zip-код); } возвращаться ( Тест,
Тест Тест Поехали! ) } Ошибки, которые я получаю в Chrome: Ошибка: гидратация не удалась, поскольку исходный пользовательский интерфейс не соответствует тому, что было отображено на сервере. Предупреждение: не ожидалось, что HTML-код сервера будет содержать расширение .
Похоже, проблема возникает из-за этой строки только после обновления страницы, а не при начальной загрузке
Я говорю это потому, что всякий раз, когда я удаляю эту строку, две ошибки исчезают, и мой сайт работает нормально.
Кроме того, я отправил файл своему другу, и он отлично заработал на его компьютере. Я пробовал проверять актуальность моих зависимостей, очищать кеш и файлы cookie, а также выполнять другие операции с моим кодом.
Любая помощь будет принята с благодарностью. Я также добавлю еще несколько фрагментов кода, а также изображение структуры каталогов.
Спасибо!
HomePage.tsx
import React, { MouseEventHandler, useState } из 'реагировать'; импортировать {Раскрытие информации, Меню, Переход} из '@headlessui/react' импортировать '../styles/globals.css' импортировать MainContent из './MainContent'; экспортировать функцию по умолчанию (){ const [isOpen, setIsOpen] = useState(false); возвращаться ( Портфолио Присоединиться как профессионал Войти Зарегистрироваться О нас setIsOpen(!isOpen)} тип="кнопка" className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 фокус:ring-offset-2 фокус:ring-offset-gray-800 фокус:ring-white" aria-controls="мобильное-меню" aria-expanded="false" > Открыть главное меню {!открыт ? ( ) : ( )} {(ссылка) => ( Войти Зарегистрироваться О нас Присоединиться как профессионал )} ) } Page.tsx
"использовать клиент"; импортировать изображение из «следующего/изображения» импортировать { Inter } из '@next/font/google' импортировать стили из «./page.module.css» const inter = Inter({ subsets: ['latin'] }) импортировать {useRouter} из «следующего/навигации»; импортировать домашнюю страницу из «@/comComponents/Homepage»; импортировать MainContent из @/comComponents/MainContent; импортировать { Main } из 'следующего/документа'; экспортировать функцию по умолчанию Home() { возвращаться ( ) } Изображение всех моих зависимостей и их версий
