Поле пользовательского поиска Google не отображается при первой загрузке в моем проекте Gatsby, отображается только при перезагрузке или обновлении - PullRequest
Новая
       32

Поле пользовательского поиска Google не отображается при первой загрузке в моем проекте Gatsby, отображается только при перезагрузке или обновлении

1 голос
/ 27 февраля 2020

Цель:

, когда сайт загружен, должно быть окно поиска вместе с пунктами меню на панели навигации.

См. Рисунок ниже: enter image description here

Проблема:

В настоящее время при первой загрузке окно пользовательского поиска Google не отображается. не появляется. Однако, когда вы перезагрузите / обновите sh страницу, она будет выглядеть как обычно и работать как обычно. Но это раздражает, так как люди могут не знать, что у меня есть окно поиска, пока они не обновят sh или не перезагрузят страницу. Вот как это выглядит при первой загрузке.

enter image description here

ОБНОВЛЕНИЕ: Я спросил, и для некоторых это нормально. Я тестировал его несколько раз в конце, в режиме инкогнито он иногда загружается нормально, а иногда нет (требуется перезагрузка / обновление sh). Так что ... не каждый может воспроизвести эту проблему постоянно. Мне любопытно, почему так происходит.

Я пытался:

В соответствии с инструкциями Google , я сделал следующее: В компоненте nav моего проекта gatsby, 

import { Helmet } from "react-helmet"
...
 <Helmet>
    <script async src="https://cse.google.com/cse.js?cx=123:456"></script>
  </Helmet>
    <nav className="nav" >
      <div className="nav-container">
        <Link to="/">Home</Link>
        <Link to="/blog">All</Link>
        <Link to="/tags/food">Food</Link>
        <Link to="/tags/style">Style</Link>
        <Link to="/tags/living">Living</Link>
        <Link to="/tags/travel">Travel</Link>
        <Link to="/about">About</Link>  
        <div className="gcse-search"></div>
      </div> 
    </nav>

Я использовал devtool и увидел, что, кажется, ничего не загружено в div, где должно появиться окно поиска. Я понятия не имею, почему это так.

ОБНОВЛЕНИЕ: Привет, с тех пор я изменил атрибут "asyn c" на "defer" и проверил его в режиме private / incognito, и вот результат:

LinuxMint :

Хром: ОК

Firefox: ОК

Манджаро (Linux)

Chrome: OK

Firefox: мигает, но не загружается

Windows:

Firefox: продолжает мигать и не горит t load

Edge: в основном нормально, но иногда это не работает

Iphone:

Safari: перед обновлением необходимо дважды обновить или перезагрузить появляется

Chrome: ОК

Android:

Chrome: ОК

ОБНОВЛЕНИЕ: Я изменил мою поисковую службу на algolia, поэтому живой сайт недоступен для тестирования.

Вот более простая версия, только что созданная для целей тестирования: LIVE DEMO , как вы можете видеть, окно поиска кратковременно мигает, а затем исчезает.

Код выглядит следующим образом: 

import React from "react"
import { Helmet } from "react-helmet"

import Layout from "../components/layout"

import SEO from "../components/seo"

const IndexPage = () => (
  <>
  <Helmet>
    <script async src="https://cse.google.com/cse.js?cx=123:456"></script>
  </Helmet>
  <Layout>
    <SEO title="Home" />
    <h1>Here goes the Google search:</h1>
    <div className="gcse-search"></div>
  </Layout>
  </>
)

export default IndexPage

Вопрос:

  1. Почему это происходит?

  2. Как отладить и исправить это?

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

после прочтения сообщения Джо sh: Опасности регидратации Я думаю, что проблема, с которой я столкнулся, была похожей. Итак, я сделал что-то подобное.

Я создаю папку с именем hooks и записываю туда ClientOnly. js. Как показано ниже: 

import React, { useState, useEffect } from 'react'

function ClientOnly({ children, ...delegated }) {
    const [hasMounted, setHasMounted] = useState(false);

    useEffect(() => {
      setHasMounted(true);
    }, []);
    if (!hasMounted) {
      return null;
    }
    return (
      <div {...delegated}>
        {children}
      </div>
    );
  }

  export default ClientOnly

Затем я написал еще один поиск. js в папке компонентов, как показано ниже: 

import React from "react"
import { Helmet } from "react-helmet"

const search = () => {
  return (
    <div>
      <Helmet>
        <script
          async
          src="https://cse.google.com/cse.js?cx=123:456"
        ></script>
      </Helmet>

      <div className="gcse-search"></div>
    </div>
  )
}


export default search

Затем я импортировал их, когда они мне нужны как: 

<ClientOnly>
   <Search />
</ClientOnly>

Теперь все, кажется, работает. Вы можете проверить это здесь: Live Demo

0 голосов
/ 29 февраля 2020
  1. Почему это происходит? 
<script 

  async // <- This is the reason why your search box does not appear on first load

  src="https://cse.google.com/cse.js?cx=123:456"

></script>

Ваша страница отображается без ожидания асинхронного c вызова fini sh. К тому времени, когда вы обновите sh, вызов asyn c завершится, и, следовательно, скрипт может быть обработан.

Как я могу отладить и исправить это?

Для отладки вы можете прикрепить функцию к событию onLoad тега сценария , который запускает console.log.

Одним из решений было бы запустить рендеринг в componentDidMount. Этот ответ может быть полезным.

...