Question

import React,{useEffect} from 'react'
import { Pin, Group } from './Pin';
import Cluster from './Cluster';

function ClusterGroupMain({textAsIcon,iconStyle,mapRef,onViewportChange,dataSet,icon,onClick,clickedMarkers }) {
    useEffect(()=>{
        console.log("Marker clicked-->>",clickedMarkers)
    })
    if(!mapRef || !dataSet) return null;
    return <div>
        <Cluster
            // props
        >
            {dataSet.map((dataPoint, i) => (
                <Pin
                    markerIndex = {i}
                    iconStyle={iconStyle}
                    onClick={onClick}

                    markerClicked={clickedMarkers&&clickedMarkers.length>0?clickedMarkers[i]:null}
                />
            ))}
        </Cluster>
    </div>
}

export default ClusterGroupMain

onClick={onClick}这句话更新了clickedMarkers 道具，正如我使用console.log console.log("Marker clicked-->>",clickedMarkers)检查过的一样。

clickedMarkers是布尔数组。最初，所有值都将为false。

./ Pin

import React from 'react';
import { Marker } from 'react-map-gl';

export class Pin extends Marker {
  render() {
    const {key,longitude,iconStyle,latitude,marker,markerIndex,onClick,markerAltText,markerClicked} = this.props
    let iconHeight = iconStyle?iconStyle.height:"40px";
    let iconWidth = iconStyle?iconStyle.width:"40px"
    return (
      <Marker key={key} longitude={longitude} latitude={latitude} offsetLeft={-10} offsetTop={-10}>
        <img style={{height:iconHeight,width:iconWidth}} src={marker} onClick={(e)=>onClick(e,markerIndex)} ></img>
        {
          !markerClicked&&markerAltText?<div style={{
            // some styling
          }}>
            <p>{markerAltText}</p>
          </div>:null
        }
      </Marker>
    );
  }
}

Pin 组件中的

markerClicked永远不会更新。它的值始终保持为假。作为响应文档，如果状态或道具发生更改，则组件将重新渲染新值。

在 ClusterGroupMain 组件中，clickedMarkers始终会更新。我已经使用console.log()进行了检查。而且，我为每个 Pin 组件传递了clickedMarkers[i]作为 markerClicked 道具。

因此，问题是为什么markerClicked不会更新clickedMarkers 。

我已经使用 React开发工具检查了markerClicked，在clickedMarkers始终更新时，它始终为false。

Answer 1

我猜您在更新clickedMarkers数组时没有在创建新的数组实例。如果直接更改数组，则react不会知道属性已更改。

在onClick函数中更新clickedMarkers状态时，请尝试使用传播运算符创建新的数组实例。

onClick = (e, markerIndex) => {
    clickedMarkers[markerIndex] = True; // change value logic
    this.setState({clickedMarkers: [...clickedMarkers]}); // spread operator to create new array instance
}

组件道具未在反应中更新

./ Pin

1 个答案: