如何循环并返回 javascript 对象的值？

Question

（如果我的某些条款不正确，请道歉）

在 Firebase 中我有很多帖子。每个帖子都有一个“纬度”字段和一个“经度”字段。我将它们取出并将它们存储在名为 mapRefs 的数组/对象中：

useEffect(() => {

    projectFirestore.collection("posts").get().then(res => {

        let mapRefs = [];

        res.forEach(data => {

            mapRefs.push([data.data().myLatitude, data.data().myLongitude]);    

        });

        console.log(mapRefs);

        });

}, []);

这有效，控制台日志的输出是：

0: (2) [-8.6848548, 115.22303799999999]

1: (2) [-8.7848548, 115.323038]

2: (2) [-8.9848548, 115.52303799999999]

3: (2) [-8.8848548, 115.42303799999999]

然后我如何迭代这些并将纬度和经度值映射到组件。我正在尝试这样：

<ReactMapGL>

    { mapRefs && mapRefs.map(coord => (

        <Marker latitude={coord[0]} longitude={coord[1]}>

            <div>

                ...

            </div>

        </Marker>

    ))}

</ReactMapGL>

这不起作用。请问这样做的正确方法是什么？

Answer 1

您需要使用状态值来呈现 UI 元素，并且mapRefs在外部不可用useEffect。尝试这样const [mapRefs, setMapRefs] = useState([])useEffect(() => {    projectFirestore.collection("posts").get().then(res => {       let refs = [];       res.forEach(data => {          refs.push([data.data().myLatitude, data.data().myLongitude]);           });       setMapRefs(refs)    });}, []);return (  <ReactMapGL>    { mapRefs.map(coord => (        <Marker latitude={coord[0]} longitude={coord[1]}>            <div>                ...            </div>        </Marker>    ))}</ReactMapGL>)