时间戳

首页 > 解决方案 > 在 React 中计算具有状态值的数组

reactjs - 在 React 中计算具有状态值的数组

问题描述

我目前有以下状态：

this.state = {
  selectProduct: [somearrayValues],
  quantityProduct: [],
  colorsProduct: [somearrayValues],
  stockProduct: [somearrayValues],
  turnaroundProduct: [],
  coatingProduct: [],
  attributeProduct: [somearrayValues],
  attributeMetaProduct: [somearrayValues],
}

我执行 fetch 调用以用所需数据填充数组。从这里我需要获取实际包含值的数组的计数。我迷失了如何做到这一点。

我首先尝试使用 for each 循环进入状态，但我什至没有通过这一点：

let dropdownArrays = ...this.state;
dropdownArrays.forEach(function(element) {
  console.log(element);
});

当 babel 尝试编译时，这给了我一个错误。然后我尝试了以下，它没有返回任何内容。

let dropdownArrays = [...this.state];
dropdownArrays.forEach(function(element) {
  console.log(element);
});

我知道我错过了它，所以任何帮助将不胜感激。

标签： reactjs

解决方案

也许您可以使用该Object#values()方法访问 的数组对象（即值）state，然后计算非空数组的数量，如下所示：

// Pre-filled arrays with some values. This solution would work
// regardless of the values you populate the arrays with
const state = {
  selectProduct: [1,2,3,4],
  quantityProduct: [],
  colorsProduct: [4,5,6,7],
  stockProduct: [1,2],
  turnaroundProduct: [],
  coatingProduct: [],
  attributeProduct: [6,7,8,9,10],
  attributeMetaProduct: [5,4,6],
}

const result = Object.values(state)
.filter((array) => array.length > 0)
.length;

console.log('Number of arrays in state with values (non-empty)', result)

推荐阅读