我操纵组件的状态,并使用处于状态的对象(输入参数)显示一些信息。
const renderTooltip = ({ object: hoveredObject, x: pointerX, y: pointerY }) => {
// console.log(hoveredObject);
const {points} = hoveredObject;
const calLoadTime = () => {
const rawTime = points.reduce(
(accumulator, currentValue) =>
currentValue ? accumulator + currentValue.SPACES : accumulator,
0
) / points.length;
return rawTime.toFixed(1);
}
return (
<span
style={{
lineHeight: '20px',
borderRadius: '3px',
width: '200px',
left: pointerX+10,
top: pointerY+5,
}}
>
{`Length: ${points.length}\n`}
</span>
)
}
但是收到以下警告,我检查了我是否没有操纵DOM元素上的状态,或者是否有一些名为
viewState
的属性?警告是什么意思?我的组件的完整代码如下所示:
import React, { memo, useEffect, useRef, useState } from 'react';
import DeckGL, {HexagonLayer} from 'deck.gl';
import { StaticMap } from 'react-map-gl';
import { INITIAL_VIEW_STATE, LAYER_CONFIGS } from './configs';
import { addMapControl } from './tools';
import { MAPBOX_TOKEN } from './constants';
import styles from './index.less';
const Map = (props) => {
const {
controller = true,
baseMap = true,
initialViewState = INITIAL_VIEW_STATE,
layerType = '3d-heatmap',
renderTooltip = DEFAULT_RENDER_TOOLTIP,
} = props;
const [tooltip, setTooltip] = useState({
object: null,
// eslint-disable-next-line react/no-unused-state
x: 0,
// eslint-disable-next-line react/no-unused-state
y: 0,
})
/**
* layers render function
*/
const renderLayers = () => {
const {
data,
accData = [],
accSpeed = 0.1,
accRadiusScale = 4,
accRadiusMaxPixels = 200,
accColorRange,
coverage = 1,
radius,
elevationScale,
...otherProps
} = props;
const layers = [];
layers.push(
new HexagonLayer({
...LAYER_CONFIGS.AugmentHexagonLayer,
...otherProps,
coverage,
data,
radius,
onHover: setTooltip,
}),
);
return layers;
}
/**
* add Control for language switching
* @param {*} event
*/
const addControlHandler = (event) => {
const map = event && event.target;
if (map) {
addMapControl(map);
}
};
const { object } = tooltip || {};
return (
<DeckGL
width="100%"
height="100%"
layers={renderLayers()} // eslint-disable-line
initialViewState={initialViewState}
controller={controller}
>
{baseMap && (
<StaticMap
onLoad={addControlHandler}
reuseMaps
mapStyle="mapbox://styles/mapbox/dark-v9"
preventStyleDiffing
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
)}
{object && renderTooltip(tooltip)}
</DeckGL>
);
}
我使用了一些第三方程序包来使工具提示在 map 中显示。
renderTooltip
Prop 是由我上面提到的renderTooltip
输入功能分配的,并且我使用tooltip
状态来控制是否在页面中显示工具提示。PS:根据deck.gl的文档,
onHover
将在以下位置触发:根据错误跟踪路径,它在我的
<span>
元素中引发了错误,这就是为什么我首先认为这是renderTooltip
的问题。Warning: React does not recognize the `viewState` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `viewstate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in span (created by Map)
in div (created by DeckGL)
in div (created by DeckGL)
in DeckGL (created by Map)
in Map (created by SpatialTemporal)
in section (created by SpatialTemporal)
in SpatioMap
in section
in Unknown (created by LBS)
in div
in div
in Unknown (created by LBS)
in LBS (created by Connect(LBS))
in Connect(LBS) (created by DynamicComponent)
in DynamicComponent (created by Route)
in Route (created by BasicLayout)
in Switch (created by BasicLayout)
in div (created by BasicLayout)
in div (created by Basic)
in Basic (created by Adapter)
in Adapter (created by BasicLayout)
in div (created by BasicLayout)
in BasicLayout (created by Adapter)
in Adapter (created by BasicLayout)
in div (created by BasicLayout)
in BasicLayout (created by Adapter)
in Adapter (created by BasicLayout)
in div (created by ContainerQuery)
in ContainerQuery (created by BasicLayout)
in DocumentTitle (created by SideEffect(DocumentTitle))
in SideEffect(DocumentTitle) (created by BasicLayout)
in BasicLayout (created by Connect(BasicLayout))
in Connect(BasicLayout) (created by DynamicComponent)
in DynamicComponent (created by Route)
in Route (created by DvaRoot)
in Switch (created by DvaRoot)
in Router (created by DvaRoot)
in LocaleProvider (created by DvaRoot)
in Provider (created by DvaRoot)
in DvaRoot
最佳答案
我今天遇到了同样的问题,并通过不将工具提示添加为deckGL的直接子代来解决了该问题:
return (
<React.Fragment>
<DeckGL
width="100%"
height="100%"
layers={renderLayers()} // eslint-disable-line
initialViewState={initialViewState}
controller={controller}
>
{baseMap && (
<StaticMap
onLoad={addControlHandler}
reuseMaps
mapStyle="mapbox://styles/mapbox/dark-v9"
preventStyleDiffing
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
)}
</DeckGL>
{object && renderTooltip(tooltip)}
</React.Fragment>
);