Javascript JSON.stringify 返回 []

Question

我正在使用 ReactJS，需要创建一个数组来插入数据，将其存储在 localStorage 中，稍后再查看。我首先使用 this.subscriptionsList = []; 创建数组，然后使用此方法检索数据。

  fetchNow = async (token, nextToken) => {
      fetch("somewebsite")
        .then(( unformattedData ) => {
          return unformattedData.json();
        })
        .then(( webData) => {
          for(let i = 0; i < webData.length; i++){
            this.subscriptionsList.push("someData");
          }
          if(webData.hasOwnProperty('token')){
            this.fetchNow(token, webData.token);
          }else{
            return;
          }
        })
      }

功能不完整，不是我提问的重点。它工作正常并推送正确的数据。

我使用这种方法检索数据:

this.fetchNow(response.accessToken, "")
      .then( () => {
        console.log(this.subscriptionsList);
        console.log(JSON.stringify(this.subscriptionsList));
        localStorage.setItem("subscriptionsList", JSON.stringify(this.subscriptionsList));
        //console.log(JSON.parse(localStorage.getItem("subscriptionsList")));
      })

当我尝试使用 JSON.stringify 时出现问题。执行 console.log(this.subscriptionsList) 会按预期打印一个包含所有数据的数组对象。但是，当我执行 console.log(JSON.stringify(this.subscriptionsList)) 时，它会返回 []。此外，当打印对象本身时，属性 length: 125 但在执行 console.log(this.subscriptionsList.length) 时返回 0当使用 this.subscriptionsList[0] 访问时，它返回 undefined。我正在阅读规范，似乎 JSON.stringify 应该与 javascript 数组一起使用。我是否遗漏了一些特定的 react ，或者这只是 JSON.parse 不可用？

https://gyazo.com/72aafe248ef61649a38c06d03fb3d830
https://gyazo.com/c2690b4392774fe4a98254a4d15f3a32
https://gyazo.com/e0793b5ec05da4259e16100f275da414

Answer 1

您需要在 fetchNow 中返回 promise 链，否则您稍后将无法链接到它。如果您还希望它也被链接，您还必须返回在 fetchNow 中调用的递归 fetchNow:

fetchNow = (token, nextToken) => {
  return fetch("somewebsite")
    .then(( unformattedData ) => {
    return unformattedData.json();
  })
    .then(( webData) => {
    for(let i = 0; i < webData.length; i++){
      this.subscriptionsList.push("someData");
    }
    if(webData.hasOwnProperty('token')){
      return this.fetchNow(token, webData.token);
    }
  })
}

async 函数不会神奇地使异步操作同步。它们 (1) 返回 Promises 并且 (2) 允许使用 await 关键字。但是由于您没有使用 await，因此 fetchNow 不需要是 async，并且由于 fetch chain 已经是一个Promise，可以不用async直接返回。

如果您确实想要使用async 和await，它会使代码更扁平且更容易理解:

fetchNow = async (token, nextToken) => {
  const response = await fetch("somewebsite");
  const webData = await response.json();
  for(let i = 0; i < webData.length; i++){
    this.subscriptionsList.push("someData");
  }
  if(webData.hasOwnProperty('token')){
    await this.fetchNow(token, webData.token);
  }
  // async function will automatically return a Promise that resolves when the end is reached
}