用对象填充的数组长度错误？

Question

我正在创建一个 React-native 应用程序，我正在使用 AsyncStorage 获取一些数据，我将这些数据转换为一个带有对象的数组，这些对象将与我从 API 获取的数据组合/连接

const available_streams = streams.channels.filter(stream => !stream.is_live)
const the_streams = available_streams.map(available_stream => {
  available_stream.checked = false
  return available_stream
})

console.log(the_streams) :
(3) [{…}, {…}, {…}]
0: {name: "channel1", url: "wss%3A%2F%2Fwebsite.com", app_name: "streams", server_name: "channel1", is_live: false, …}
1: {name: "channel3", url: "wss%3A%2F%2Fwebsite.com", app_name: "streams", server_name: "channel3", is_live: false, …}
2: {app_name: "sms", url: "website.com:4443", server_name: "93b5d83448", name: "Test", is_live: false, …}
length: 3

 let saved_stream_names = []
 // LOCAL VALUES
 get_session_value('url').then(url => {
    get_session_object('stream_names')
    .then(stream_names => {
       stream_names.forEach(name => {
           saved_stream_names.push({
                 name: name,
                 checked: false,
                 is_live: false,
                 url: url
            })
       })
    })
 })
Array.prototype.push.apply(saved_stream_names, the_streams)
console.log(saved_stream_names)

console.log 打印以下内容：

(3) [{…}, {…}, {…}] <---- !! WHY 3 ?!!
0: {name: "channel1", url: "wss%3A%2F%2F.website.com", app_name: "streams", server_name: "channel1", is_live: false, …}
1: {name: "channel3", url: "wss%3A%2F%2Fwebsite.com", app_name: "streams", server_name: "channel3", is_live: false, …}
2: {app_name: "sms", url: "wss://website3:4443/", server_name: "93b5d83448", name: "Test", is_live: false, …}
3: {name: "Xxx", checked: false, is_live: false, url: "https://website.com/"}
4: {name: "Next", checked: false, is_live: false, url: "website.com"}
5: {name: "Arghhj", checked: false, is_live: false, url: "https://website.com/"}
length: 6

也 console.log(saved_stream_names.length) 说它的大小是 3，我不能遍历最后 3 个对象。 这是什么神仙？

Answer 1

这是一个同步问题。

get_session_value('url')

返回一个promise， then() 中的代码只有在这个promise 被解决时才会执行。 即使 console.log(saved_stream_names) 是最后一行代码，它也会在 then() 中的代码之前执行。 尝试将 console.log 移动到 then 内部：

 let saved_stream_names = []
 // LOCAL VALUES
 get_session_value('url').then(url => {
    get_session_object('stream_names')
    .then(stream_names => {
       stream_names.forEach(name => {
           saved_stream_names.push(
              ({
                 name: name,
                 checked: false,
                 is_live: false,
                 url: url
               })
           )
       })
       console.log(saved_stream_names)
    })
 })
Array.prototype.push.apply(saved_stream_names, the_streams)

Answer 2

我相信这可能是因为在 get_session_value() 完成运行之前调用了 console.log 。 所以当 console.log 被打印出来时，它只包含the_streams的值。 但是，由于它引用了一个数组，因此在您查看它时它将显示整个内容。 您可以通过执行 console.log(JSON.stringify(saved_stream_names)) 来确认这一点。

我建议你把这些代码行：

Array.prototype.push.apply(saved_stream_names, the_streams)
console.log(saved_stream_names)

在 get_session_object.then() 函数内。