数组不 fill/map() 正确反应

Question

我正在尝试映射一个数组，但我认为它填错了，因为它给出了 undefined 我添加了一些东西但由于某些原因它们出现 undefined

如果您查看顶部，它在顶部是一个单独的数组，如果我尝试使用 .map()

获取它们，其余部分将是 undefined

这张图片来自此处的控制台日志：

           {RuuviTag.map((tag) => (



              <div key={tag.MAC}>
                {console.log(tag.MAC),
                console.log(tag)


                }

                <Marker position={[tag.Latitude.replace(/,/g, '.'), tag.Longitude.replace(/,/g, '.')]} icon={new Icon({
                   iconUrl: tag.colorIcon,
                    iconSize: [25, 41],
                     iconAnchor: [12, 41] })} >
                  <Popup>
                    <h1>{tag.MAC}
                       </h1>
                       <h1>
                       </h1>
                  </Popup>
                </Marker>





              </div>
            ))}\

这是我填充数组的代码：

 async function getData() {
    setLoading(true);

    ref.onSnapshot((querySnapshot) => {
      let items = [];

      querySnapshot.forEach((doc) => {
       
        let item = doc.data()
        console.log(doc.data().RawData)
        PostRawData(doc.data().RawData).then(function (result) {
          console.log(result)
          item.decryptedData = result.data;
        });

        checkBoundaries(doc.data().RawData).then(function (result) {
          console.log(result)
          item.colorIcon = result;
        });
        console.log(item)

        items.push(item);
        console.log(items)

      });

但是当我尝试映射 colorIcon 或解密数据中的其他内容时，它显示为 undefined

有谁知道如何解决这个问题？我在任何地方都找不到这个问题

Answer 1

你应该在完成异步功能后推送项目。

像这样

let item = doc.data()
Promise.all([
  PostRawData(doc.data().RawData),
  checkBoundaries(doc.data().RawData),
]).then(function (result) {
  item.decryptedData = result[0].data;
  item.colorIcon = result[1]
  items.push(item)
})

数组不 fill/map() 正确反应

Array doesnt fill/map() right React

javascript

arrays

leaflet

reactjs