Choropleth 图例中缺少唯一键属性 (React 19)

// app/components/GeoChart.tsx 'use client';

import { useState, useEffect } from 'react'; import { ResponsiveChoropleth } from '@nivo/geo'; import * as topojson from "topojson-client"; import { Feature, FeatureCollection } from 'geojson'; import { Topology } from 'topojson-specification';

// Data using ISO 3166-1 numeric-3 codes const geoData = [ { "id": "840", "value": 450000 }, // USA { "id": "356", "value": 210000 }, // IND { "id": "826", "value": 180000 }, // GBR ];

const worldCountriesUrl = 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json';

export function GeoChart() { const [features, setFeatures] = useState<Feature[]>([]);

useEffect(() => { const fetchData = async () => { const response = await fetch(worldCountriesUrl); const world = await response.json() as Topology; if (world.objects && world.objects.countries) { const countries = topojson.feature(world, world.objects.countries) as FeatureCollection; setFeatures(countries.features); } }; fetchData(); }, []);

return ( <div style={{ height: "400px" }}> <ResponsiveChoropleth data={geoData} features={features} margin={{ top: 0, right: 0, bottom: 0, left: 0 }} colors="purples" domain={[0, Math.max(...geoData.map(d => d.value))]} unknownColor="#E5E7EB" label="properties.name" valueFormat=".2s" projectionTranslation={[0.5, 0.6]} projectionRotation={[0, 0, 0]} borderWidth={0.5} borderColor="#ffffff" // The warning is triggered by this 'legends' prop legends={[ { anchor: …