Gatsby 谷歌自定义搜索框没有'；t在我的盖茨比项目的第一次加载时显示，仅在重新加载或刷新时显示

目标：

加载站点时，应在导航栏中包含搜索框和菜单项

见下图：

问题：

当前首次加载时，google自定义搜索框没有出现。但是，当您重新加载/刷新页面时，页面将显示为正常，功能正常。但这很烦人，因为人们在刷新或重新加载页面之前可能不知道我有搜索框。这是第一次加载时的外观

更新：我四处打听了一下，对一些人来说很好。我在我的终端测试了几次，在匿名模式下，它有时加载良好，有时不加载（需要重新加载/刷新）。所以不是每个人都能一直重复这个问题。我很好奇为什么会这样

我试过：

据了解，我做了如下工作： 在我的盖茨比计划的导航部分

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>

从“react Helmet”导入{Helmet}
...
家
全部的
食物
风格
活着的
旅行
关于

我确实使用了devtool，并且看到似乎没有任何东西加载到应该显示搜索框的div中。我不知道这是为什么

更新： 您好，我已经将“async”属性更改为“defer”，并在private/incognito模式下对其进行了测试，结果如下：

利努克斯明：

铬：好的

火狐：好的

Manjaro（Linux）

铬：好的

Firefox：闪烁但不加载

窗口：

Firefox：仍然闪烁且不加载

边缘：基本上可以，但有时不起作用

Iphone：

Safari:需要刷新/重新加载两次才能显示

铬：好的

安卓：

铬：好的

更新：我已经将我的搜索服务改为algolia，所以该网站无法进行测试

以下是一个简单的版本，仅用于测试目的： 如您所见，搜索框短暂闪烁，然后消失

代码如下：

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

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

从“React”导入React
从“反应头盔”导入{Helmet}
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
常量索引页=（）=>(
下面是谷歌搜索：
)
导出默认索引扩展

问题：

为什么会这样

如何调试和修复它

为什么会这样

为什么会这样
阅读了Josh的帖子后：我认为我遇到的问题与此类似。所以我做了类似的事情

我创建了一个名为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

import React，{useState，useffect}来自“React”
函数ClientOnly（{children，…delegated}）{
const[hasMounted，setHasMounted]=使用状态（false）；
useffect（（）=>{
setHasMounted（真）；
}, []);
如果（！hasMounted）{
返回null；
}
返回(
{儿童}
);
}
仅导出默认客户端

然后我在component文件夹中编写了另一个search.js，如下所示：

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

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

从“React”导入React
从“反应头盔”导入{Helmet}
常量搜索=（）=>{
返回(
)
}
导出默认搜索

然后，每当我需要它们时，我都会将它们导入为：

<ClientOnly>
   <Search />
</ClientOnly>



现在一切似乎都好了。您可以在这里进行测试：
阅读Josh的帖子后：我认为我遇到的问题与此类似。所以我做了类似的事情

我创建了一个名为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

import React，{useState，useffect}来自“React”
函数ClientOnly（{children，…delegated}）{
const[hasMounted，setHasMounted]=使用状态（false）；
useffect（（）=>{
setHasMounted（真）；
}, []);
如果（！hasMounted）{
返回null；
}
返回(
{儿童}
);
}
仅导出默认客户端

然后我在component文件夹中编写了另一个search.js，如下所示：

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

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

从“React”导入React
从“反应头盔”导入{Helmet}
常量搜索=（）=>{
返回(
)
}
导出默认搜索

然后，每当我需要它们时，我都会将它们导入为：

<ClientOnly>
   <Search />
</ClientOnly>



现在一切似乎都好了。您可以在此处进行测试：
是否可以使用useEffect进行测试？虽然。。。我不知道该怎么写。可以用useEffect吗？虽然。。。我不知道该怎么写。