Google Map Places API 未加载 React

问题描述

我有一个 React 应用程序，我在其中实现了一个 Firebase 数据库，其中包含一个表单，用户可以在其中记录他们的联系信息、使用谷歌地点自动完成功能的来源和目的地地址，以及要随数量移动的项目列表。然后应用程序进入一个页面，显示该数据库中所有文档的卡片。单击时，卡片会显示一个模式，其中包含文档中包含的所有信息以及用于编辑文档的表单。唯一的问题是 Google Map Places API 不会加载到自动完成选项的编辑表单中。

模态的设置方式是，当单击卡片时，道具“selectedDiv”设置为该卡片所代表的任何文档的 doc.id，并且模态显示该文档。

显示所有这些的路线代码：

function App() {
  const [selectedDiv,setSelectedDiv] = useState(null);

  return (...

...<Route path="/Appointments" component={Appointments}>
              <Appointments setSelectedDiv={setSelectedDiv} />
              {selectedDiv && (<div>
                <Modal selectedDiv={selectedDiv} setSelectedDiv={setSelectedDiv}/>
                </div>
              )}
            </Route>...

模态内的代码，调用编辑表单：

            <div className={classes.dataDiv}>
              <TabPanel value={value} index={0} className={classes.dataPanel}>
              ...
              </TabPanel>
              <TabPanel value={value} index={1} className={classes.dataPanel}>
              ...
              </TabPanel>
              <TabPanel value={value} index={2} className={classes.dataPanel}>
                ...
              </TabPanel>
              <TabPanel value={value} index={3} className={classes.dataPanel}>
                <div className={classes.dataContent}>
                  <h3>Edit Your Information</h3>
                  <MoveEdit selectedDiv={selectedDiv} />
                </div>
              </TabPanel>
            </div>

最后是编辑表单中地方 API 的代码：

  const { ref } = usePlacesWidget({
    apiKey: process.env.REACT_APP_GOOGLE,onPlaceSelected: (place) => {
      formik.setFieldValue("origin.Origin",place.formatted_address);
      formik.setFieldValue("origin.OriginGeometry.OriginLat",JSON.stringify(place.geometry.location.lat()))
      formik.setFieldValue("origin.OriginGeometry.OriginLng",JSON.stringify(place.geometry.location.lng()))
    },options: {
      componentRestrictions: { country: "us" },types: ["address"],fields: ["formatted_address","geometry"],},});

其中有两个，但它们的功能完全相同，所以我认为没有必要同时包含两者。这几乎是从我的创建表单复制和粘贴的，所以我知道它可以在那里工作。唯一的问题是在这个模态内。有趣的是，我设置了一个从 react-router-dom 到原始创建表单的链接，从模态，而地点 API 在被定向到原始创建表单后不会加载。不过，刷新解决了这个问题，所以我认为它一定与 selectedDiv 状态有关。

用于谷歌地点自动完成的依赖项是 react-google-autocomplete 将提供任何进一步的说明或必要的代码来解决这个问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）