ReactJS useState, onClick 显示信息窗口答案

【问题标题】：ReactJS useState, onClick show InfoWindowReactJS useState, onClick 显示信息窗口
【发布时间】：2020-11-12 05:45:57
【问题描述】：

在我的反应谷歌地图代码中，我无法设置 onclick open InfoWindow。我指的是这个教程：https://youtu.be/WZcxJGmLbSo?t=1545

我的代码：

import React, { useState } from "react";
import {
  GoogleMap,
  useLoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api"; // --> using @react package

const libraries = ["places"];
const mapContainerStyle = {
  width: "100%",
  height: "100vh",
};
const center = {
  lat: 51.103807,
  lng: 10.057477,
};


export default function App() {

const [setSState, sstate] = React.useState(null);

  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_KEY,
    libraries,
  });

  if (loadError) return "error loading maps";
  if (!isLoaded) return "loading maps";

  return (
    <div>
      <GoogleMap
        mapContainerStyle={mapContainerStyle}
        zoom={6}
        center={{ lat: 50.115509, lng: 8.690508 }}
      >
        <Marker
          position={{ lat: 51.081753, lng: 13.696073 }}
           onClick={() => {
            sstate(!setSState);
            console.log("marker clicked");
          }}
          }}
        ></Marker>
      </GoogleMap>
    </div>
  );
}

我无法仅在单击时显示标记。我该怎么办？我现在正在对数据进行硬编码。我还是新手。

当单击标记上的 X 并再次单击标记时，它会崩溃。我知道我必须使用 onCloseClick，当我尝试时它不起作用。

【问题讨论】：

请阅读docs on useState。 useState 返回状态值在索引 0 处的数组，在索引 1 处返回更新器函数。您将整个数组用作函数。
好的，谢谢。很抱歉你的回答不赞成

标签： reactjs google-maps-api-3 onclick use-state

【解决方案1】：

看看useState Hook docs。

钩子会给你一个状态变量以供使用，以及一个可用于更新该变量的函数。

在您想要拥有的组件的顶部：

const [centerState, setCenterState] = useState(null);

然后你可以在 Marker 中使用它来更新状态：

onClick={() => setCenterState(center)}

这将更新状态，但在您的代码中，您当前从组件外部分配的对象获取center，您可能需要考虑在该状态下要设置什么。

【讨论】：