React組件中的洗掉按鈕無法從頁面獲取useState

我正在制作一個 Google Map API 應用程式。但是我在從組件呼叫 setMarker(useState) 時遇到了麻煩。

它說，未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“過濾器”）。

我想制作一個表格來顯示我的搜索位置結果并存盤到 useState(markers)。但是，當我想通過單擊按鈕洗掉位置結果時，它不起作用。我應該怎么做才能制作洗掉按鈕。謝謝

我的 Map.js/App.js

import React, { useState, useEffect, useRef } from "react";
import {
  GoogleMap,
  useJsApiLoader,
  Marker,
  StandaloneSearchBox,
} from "@react-google-maps/api";

import Tablerecord from "../components/Tablerecord";

const libraries = ["places"];

const containerStyle = {
  width: "100%",
  height: "400px",
};

const inputStyle = {
  width: "100%",
  height: "500px",
};

const center = {
  lat: 22.7658314,
  lng: -22.4137297,
};

const options = {
  disableDefaultUI: true,
  zoomControl: true,
};

function App() {
  const [markers, setMarkers] = useState([]);
  const searchBox = useRef(null);

  const [searchPlaceCenter, setSearchPlaceCenter] = useState([
    parseFloat(43.7658314),
    parseFloat(-79.4137297),
  ]);

  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "API-KEY",
    libraries,
  });

  return isLoaded ? (
    <div>
      <StandaloneSearchBox
        onLoad={(ref) => (searchBox.current = ref)}
        onPlacesChanged={async (event) => {
          await // Find the search field value and make it be center value.
          setSearchPlaceCenter([
            parseFloat(
              searchBox.current.getPlaces()[0].geometry.location.lat()
            ),
            parseFloat(
              searchBox.current.getPlaces()[0].geometry.location.lng()
            ),
          ]);
          //  Store Search geolocation value to useState markers for Red markers
          setMarkers((current) => [
            ...current,
            {
              lat: searchBox.current.getPlaces()[0].geometry.location.lat(),
              lng: searchBox.current.getPlaces()[0].geometry.location.lng(),
              name: searchBox.current.getPlaces()[0].formatted_address,
              time: new Date(),
            },
          ]);
        }}
      >
        <input
          type="text"
          name="address"
          placeholder="Search Address"
          autoComplete="off"
          style={{
            boxSizing: `border-box`,
          }}
        ></input>
      </StandaloneSearchBox>

      <GoogleMap
        mapContainerStyle={containerStyle}
        zoom={8}
        //  Set center to searchPlace location to change center
        center={{
          lat: parseFloat(searchPlaceCenter[0]),
          lng: parseFloat(searchPlaceCenter[1]),
        }}
        options={options}
      >
        {markers.map((marker) => (
          <Marker
            key={marker.time.toISOString()}
            position={{
              lat: parseFloat(marker.lat),
              lng: parseFloat(marker.lng),
            }}
          />
        ))}
      </GoogleMap>

      {/* !!!!!!!!Here is my question !!!!!!*/}
      {markers.map((marker) => (
        <div>
          <Tablerecord key={marker.time} marker={marker} />
        </div>
      ))}
    </div>
  ) : (
    <div>Loading...</div>
  );
}

export default React.memo(App);

我的 Tablerecord.js（組件）

import React, { useState } from "react";
import styles from "../styles/tablerecord.module.css";

const Tablerecord = (marker,{markers,setMarkers}) => {


  const handleRemoveLocation = (e) => {
    const name = e.target.getAttribute("name");
    console.log(markers) // undefined
    setMarkers(markers.filter((item) => item.name !== name));
  };

  return (
    <div className={styles.table}>
      <center>
          {/* This work, can show name,lat and lng */}
        <p name={marker.marker.name}>Name: {marker.marker.name}</p>
        <p>
          lat: {marker.marker.lat}, lng: {marker.marker.lng}, Added Time:{" "}
          {marker.marker.time.toTimeString()}
        </p>

        {/* Delete button I want to ask */}
        <button name={marker.name} onClick={handleRemoveLocation}>
          x
        </button>
      </center>
    </div>
  );
};

export default Tablerecord;

uj5u.com熱心網友回復：

您已經接近了，但還沒有完全通過正確的道具發送到表格記錄組件。

<Tablerecord key={marker.time} marker={marker} markers={markers} setMarkers={setMarkers} />

然后，

const Tablerecord = (props) => {
   const { marker, markers, setMarkers } = props; 
   // ...
}

或者，如果您愿意：

const Tablerecord = ({ marker, markers, setMarkers }) => {
   // ...
}

uj5u.com熱心網友回復：

我相信您需要將狀態添加到組件中，如果可行，請 lmk

<Tablerecord key={marker.time} marker={marker} markers={markers} setMarkers={setMarkers} />

uj5u.com熱心網友回復：

感謝以上所有評論！

最后，我調整了“Tablerecord”組件的代碼和“Map.js”的一些代碼。

這是我的代碼

Tablerecord.js（組件）

import React, { useState } from "react";
import styles from "../styles/tablerecord.module.css";

const Tablerecord = ({ marker, markers, setMarkers }) => {
  const handleRemoveLocation = (e) => {
    const name = e.target.getAttribute("name");
    //   markers will output an Object to use .filter
    // filter out the item which is equal to the name.
    setMarkers(markers.filter((item) => item.name !== name));
  };

  return (
    <div className={styles.table}>
      <center>
        {/* String type - name , lat, lng and time */}
        <p>Name: {marker.name}</p>
        <p>
          lat: {marker.lat}, lng: {marker.lng}, Added Time:{" "}
          {marker.time.toTimeString()}
        </p>
        {/* marker.name can let setMarkers detect the name */}
        <button name={marker.name} onClick={handleRemoveLocation}>
          x
        </button>
      </center>
    </div>
  );
};

export default Tablerecord;

地圖.js

<Tablerecord key={marker.time} marker={marker} markers={markers} setMarkers={setMarkers} />

標籤：javascript 反应 钩

上一篇：為什么在正則運算式中沒有選擇unicode數字

下一篇：使用增量/減量框編輯變數中的引數并保存