Map.size 返回 0 并且 Map.values() 返回空迭代器，即使地图已填充

如何解决Map.size 返回 0 并且 Map.values() 返回空迭代器，即使地图已填充

我从 API 获取对象并用它们填充地图，然后将它们作为道具传递给子组件。问题是当我 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 />
        }
        </> 
    );

解决方法

问题在于您没有在调用 map 之前等待您的承诺解决和更新 setHealthWards(map)。解决此问题的一个好方法是使用 Promise.all()，它接受​​一个可迭代的 Promise 并返回一个可在可迭代中的所有 Promise 都得到解决时解决的承诺：

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);