Mapbox 使用多个源的react map gl使其中一个不可见

我在

ReactMapGL

下指定了两个

元素，试图加载两个不同的

FeatureCollection

s，颜色不同。当两个

源代码都存在时，它不起作用，因为它隐藏了第一个源代码（id:
有收益率的映射）并显示了后者（id:
无收益率的映射）

对于第一个
源
，也会打印以下警告

TypeError: Cannot read property 'fill-color' of undefined

我们不允许使用多个来源，还是我在这里做错了什么

<MapGL
  {...viewport}
  mapboxApiAccessToken={accessToken}
  onViewportChange={viewport => setViewport(viewport)}
  onHover={onHover}
  onClick={onClick}
  onLoad={onLoad}
  width="100%"
  height="100%"
  scrollZoom={false}
  dragRotate={false}
  touchRotate={false}
  keyboard={false}
>
  {map && map.features.length > 0 ? (
    <Source id="maps-with-yield" type="geojson" data={map}>
      <Layer
        id="data"
        type="fill"
        paint={{
          'fill-color': {
            property: 'yield',
            stops: [
              [minYield, worstYieldColor],
              [maxYield, bestYieldColor]
            ]
          },
          'fill-outline-color': '#fff'
        }}
      />
    </Source>
  ) : null}
  {mapWithoutYield && mapWithoutYield.features.length > 0 ? (
    <Source id="maps-without-yield" type="geojson" data={mapWithoutYield}>
      <Layer
        id="data"
        type="fill"
        paint={{
          'fill-color': '#66AEEC',
          'fill-outline-color': '#fff'
        }}
      />
    </Source>
  ) : null}
</MapGL>

setViewport（viewport）}
onHover={onHover}
onClick={onClick}
onLoad={onLoad}
宽度=“100%”
高度=“100%”
scrollZoom={false}
dragRotate={false}
touchRotate={false}
键盘={false}
>
{map&&map.features.length>0(
)：null}
{mapWithoutYield&&mapWithoutYield.features.length>0(
)：null}

注意：属性
yield
始终可用，因为我已经打印了
map
和
map而没有yield
数据集并进行了检查