如何在反应中循环数据并将值分配给状态数组

Question

我有一个类组件，它的状态包含一个 filterItems[] 空白数组。我需要填充 filterItems 数组中的值

所以，我有一个来自 API 的数据，看起来像这样：

0:
emp_code: "a001"
company_code: "company_a"
keys: ["id", "post" ] 
dtypes: ["str", "int"]

1:
emp_code: "b001"
company_code: "company_b"
keys: ["sal", "name" ] 
dtypes: ["int", "str"]

//so on for other companies and employees

所以，像这样，我有几个员工。 现在我必须遍历这个 api 数据并提取信息并将其存储到另一个名为“filters”的数组中并将其传递给一个函数。

我的过滤器数组应该是这样的：

filters: [
        {
          key_name: "id",
          company_code: "company_a",
          input_type: "text",
          dtype: "str"
        },
        {
          key_name: "post",
          company_code: "company_a",
          input_type: "text",
          dtype: "int"
        },
//... keys for other company
]

基本上， 我需要在反应中做以下事情

for each emp_code
  for each company_code
     for each key:
         keys[i]== filters.key_name
         company_code== filters.company_code
//...so on

这里的问题是，每家公司都有一组键，所以如果员工属于同一家公司，那么我不需要再次添加到过滤器数组中。 所以，我基本上需要检查唯一的 company_code 并将公司拥有的不同类型的键添加到过滤器数组中。

Answer 1

如果我的理解正确，您希望像这样过滤您的数据：

假设您将 API 数据存储在一个名为 myArr 的变量中

创建一个名为 updatedArr 的新变量，它将映射到 myArr

const updatedArr = myArr.map((company, compIndex, compArr) => {
    return company.keys.map((key, keyIndex, keyArr) => {
        return {
            key_name: key,
            company_code: company.company_code,
            input_type: "text",
            dtype: company.dtypes[keyIndex]
        }
    })
}).reduce((acc, cur) => {
    return [...acc, ...cur]
}, [])

然后解析 updatedArr 以仅获取 uniqueValues

let uniqueValues = [];
//parses out duplicates
updatedArr.forEach(function(item) {
  //i will be 0 or more if there already is an item in our array, which means the current item we are iterating over is a duplicate
  var i = uniqueValues.findIndex(
    x => x.dtype == item.dtype && x.company_code == item.company_code
  );
  if (i <= -1) {
    //if item is not yet inside uniqueValues, add it to uniueValues
    uniqueValues.push(item);
  }
});

然后使用 uniqueValues 更新您的 componentState

this.setState({
   filters: uniqueValues
})

还创建了一个沙盒来向您展示这个正在运行的工作： https://codesandbox.io/s/rendering-companies-ibs7g

Answer 2

假设你的数据是一个数组。

    let filters = [];

    data.forEach(item => {
        item.keys.forEach(key => {
            item.dtypes.forEach(dtype => {
                const filter = {
                    key_name: key,
                    company_code: item.company_code,
                    input_type: "text",
                    dtype: dtype
                };
                filters.push(filter)
            })
        })
    });