如何在react中遍历数据并将值赋给状态数组

Question

我有一个类组件，它的状态包含一个 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: [
        {
          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

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

    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)
            })
        })
    });

Answer 2

如果我没理解错的话，您希望像这样过滤您的数据:

假设您将 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以仅获取uniqueValue

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);
  }
});

然后使用唯一值更新组件状态

this.setState({
   filters: uniqueValues
})

还创建了一个沙盒来向您展示此工作：https://codesandbox.io/s/rendering-companies-ibs7g