Javascript Map.size返回0，Map.values（）返回空迭代器，即使映射已填充

我从API中获取对象，并在将它们作为道具传递给子组件之前用它们填充映射。问题在于，当I

console.log（map）

中包含预期对象时-

console.log（map.size）

是

0

。类似地，

map.values（）

返回一个空迭代器

这让我很困惑。当我只将一个对象作为道具传递给它时，子对象呈现得非常完美——但现在我尝试获取并传递多个对象，我似乎无法让数据结构为我工作

我清楚地知道，

GraphUI

组件可能没有以正确的方式处理地图道具。然而，我首先要验证数据是否被正确地传递，到目前为止，它似乎没有被传递

所以我想我的问题是——传递作为道具的多个对象的最佳数据结构是什么

const Graph = ( { geoCodes, dataChoice } ) => {
    const [healthWards, setHealthWards] = useState(null);


    const url = '...';

    useEffect(() => {
        const getData = (geoCodes) => {
            var map = new Map();
            geoCodes.forEach(geoCode => axios.get(url.concat(geoCode))
                .then(response => {
                    map.set(response.data.name, response.data);
                 })
                .catch(error => console.error(`Error: ${error}`))
            );
            setHealthWards(map);
        };
        getData(geoCodes);
    }, [geoCodes, healthWards]);

    return (
        <>
        {healthWard !== null ?
            <GraphUI 
                healthWards={healthWards} 
                dataChoice={dataChoice}
            /> 
            : <LoadingSpinner />
        }
        </> 
    );

const图=（{geoCodes，dataChoice}）=>{
const[healthWards，setHealthWards]=useState（null）；
常量url='…'；
useffect（（）=>{
常量getData=（地理代码）=>{
var map=newmap（）；
geoCodes.forEach（geoCode=>axios.get（url.concat（geoCode））
。然后（响应=>{
map.set（response.data.name，response.data）；
})
.catch（error=>console.error（`error:${error}`））
);
setHealthWards（map）；
};
获取数据（地理编码）；
}，[geoCodes，healthWards]）；
返回(
{健康！==null？
: 
}
);

问题在于，在调用

setHealthWards（map）

之前，您没有等待承诺解决和更新

map

。解决这个问题的一个好方法是使用

Promise.all（）

，它接受一个iterable承诺，并在iterable中的所有承诺都解决后返回一个承诺：

const geoData = new Map();
Promise.all(geoCodes.map(geoCode => {
    return axios.get(url.concat(geoCode))
        .then(response => geoData.set(response.data.name, response.data))
})).then(() => setHealthWards(geoData);

---

谢谢你修复了它！我想我需要多读一些关于JS中异步和承诺的书。