Javascript 如何在react中循环数据并为状态数组赋值

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

这里需要注意的是，每个公司都有一组密钥，因此如果员工属于同一个公司，那么我不需要再次添加到过滤器数组中。

---

因此，我基本上需要检查唯一的公司代码，并将公司拥有的不同类型的密钥添加到过滤器数组中。

假设您的数据是一个数组

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

---

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

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
]

假设您将API数据存储在一个名为

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

的新变量，该变量将映射到

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以仅获取唯一值

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

还创建了一个沙盒，向您展示了这项正在进行的工作：

---

为什么不添加api中的数据，而不是控制台日志？这是您正在使用的算法，还是在React中进行操作以使其有意义？如果您使用16.6上的react from，我认为

getDerivedStateFromProps

可能是放置映射的合适位置，因此这将在每个键上循环，并为不同的数据类型生成两个输出，但在我的状态下：键id有一个数据类型str，而post有一个数据类型int。因此我需要同时循环键和数据类型Yes。这是在上面的代码片段中完成的。首先循环outerLoop上的所有项目。然后循环所有键，循环innerLoop中的所有数据类型，创建新对象并将其推送到过滤器。试试这个片段，让我知道你的想法这是正确的，你能告诉我如何检查公司的独特性吗。所以基本上，如果公司已经存在，我不希望它再添加公司。@user8306074 ohhh。因此，您只需要添加一次公司，那么如何处理不同的密钥和数据类型？他们不需要自己的物品吗？您向我们展示的所需输出具有多个相同的公司代码，因此不清楚您想要制作什么：/因此，基本上，我希望根据键对每个公司代码应用过滤器。因此，键是我的数据集中的列，它们是公司的关键标识符。所以我想应用任何基于公司代码的过滤，并检索这些过滤器的emp代码。你的代码运行良好。但它会为每一行生成一个输出。因此，如果我有同一公司的两名员工，那么它将在过滤器数组中创建两个相同的对象。因此，我希望company_代码是unqiueSo，如果我的数组再次读取相同的company_代码，则拒绝它，并移动到下一行。我想我们需要一个if条件，在第一个map loophmm之后检查这个，这是一个可能的解决方案。现在，我们为公司中的每个唯一密钥生成一个对象，我认为这对于您希望如何使用这些数据是有意义的。我认为我们实际上需要配置表代码，以便它知道如何正确过滤这些数据。不过，这可能是一个完全不同的问题。