无法更改我的数组，因为我有范围问题

Question

我不知道为什么，但我的仪表板有一些问题。所以基本上我想创建一些花哨的甜甜圈图。为此，我准备了一个数据集数组，我将我的数字放入其中。所有这些都有效。但是当我从数据库中获取数据时，我想更改数组以更新图表。这是我有问题的地方。所以我的 data() 看起来像这样：data() {  return {    disturbances_category_0: [],    disturbances_category_1: [],    disturbances_category_2: [],    disturbances_category_3: [],    datasets: [      {        data: [20, 20, 10, 50], //HERE I HAVE TO CHANGE THE NUMBERS <-------------        backgroundColor: ["#A40000", "#580000", "#EC4A3B", "#179C7D"],        hoverBackgroundColor: ["#ff1a1a", "#b30000", "#f4948b", "#66bfac"]      }    ],    labels: ["Banana", "Apple", "Strawberry", "Cherry"],    option: {}  };},然后是我的 created()-Block，我使用 Axios + Sequelize 和 Feathers 来获取我的数据：created() {  axios.get('http://localhost:3030/disruptions/', {    params: {      DisruptionCategory: 0    }  })  .then((response) => {    this.disturbances_category_0 = response.data.data; //HERE IS THE COMPLETE ARRAY     this.datasets[0].data[0] = this.disturbances_category_0.length; //HERE I WANT TO SET THE LENGTH  })  .catch((error) => {      console.log(error.data);  });  //imagine that for the other fruits as well...  console.log(this.datasets[0].data[0]);}如果我测试这个脚本，我总是得到“20”作为打印输出。我不知道为什么它不改变 datasets.data-Array ......我也尝试过使用 Array.push 但......什么也没发生..我确定我忘记了一些明显的东西......

Answer 1

这是因为控制台日志很可能在执行 then 块之前很久就发生了。在用长度覆盖它之前，它的初始值是一个由四个整数组成的数组。尝试使创建的函数异步并等待 axios 承诺链解决。

async function created() {

  await axios.get('http://localhost:3030/disruptions/', { // await the resolve

    params: {

      DisruptionCategory: 0

    }

  })

  .then((response) => {

    this.disturbances_category_0 = response.data.data; //HERE IS THE COMPLETE ARRAY 

    this.datasets[0].data[0] = this.disturbances_category_0.length; //HERE I WANT TO SET THE LENGTH

  })

  .catch((error) => {

    console.log(error.data);

  });

  //imagine that for the other fruits as well...

  console.log(this.datasets[0].data[0]); // now this should be updated

}

Answer 2

console.log(this.datasets[0].data[0]);

由于它是异步的，因此上面将在处理您的请求的响应之前运行。一旦您从服务器获得响应，您的代码将继续执行，而 .then() 部分将在另一个线程上执行。