组件道具没有在反应中更新

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
}