組件道具沒有在反應中更新

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是布爾數組。 最初所有的值都是假的。

。/別針

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永遠不會更新。 它的值始終為 false。 作為 react 文檔，如果 state 或 props 發生變化，則組件將使用新值重新渲染。

在ClusterGroupMain組件中 clickedMarkers 總是得到更新。 我已經使用console.log()檢查過。 而且，我將clickedMarkers[i]作為每個Pin組件的markerClicked道具傳遞。

所以，問題是為什么markerClicked如果沒有得到更新clickedMarkers一樣。

我已經使用React dev tool檢查了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
}