将二维 excel 表转为过滤下拉列表

Question

你能帮我弄清楚如何使用 reactjs 将下面的表格变成过滤的下拉列表。 我需要按年龄过滤结果（假设用户是 33 岁）并向他展示他的年龄组的可用选项（覆盖的资本和与之相关的每月保费）然后捕获所选数据。

这是我迄今为止所取得的成就：

1 - 将 Excel 表转换为 CSV，然后使用此网站 https://shancarter.github.io/mr-data-converter/ 我将其更改为 JSON ARRAY。 这是结果的sn-p：

[["111.000 €","25 €","27 €","28 €","31 €","34 €"  ],["138.000 €","32 €","33€","35€","39 €","42 €"  ].... ]

2 - 从出生日期计算年龄，然后连接一个函数来识别用户所属的类别。注意我所说的索引是列表项的索引 例如： ["111.000 €","25 €","27 €","28 €","31 €","34 €" ] 列表从 0 , 1, 2 ... 对应于excel表格上的列。

getIndex = (age) => {
    let index = null;
    if (age < 25 ) {
        index = 1
    }
    if (age < 30 && age > 24) {
        index = 2
    }
    if (age < 40 && age > 29) {
        index = 3
    }
    if (age < 45 && age > 39) {
        index = 4
    }
    if (age > 45) {
        index = 5
    }
    this.setState({
        age_index : index
    })
};

3- 我使用 forEach 从主列表中获取单独的项目并生成一个新列表，其中仅包含与索引值匹配的参数。

createNewArrayLife = (listitem) => {
        if (this.state.age_index) {
           listitem.forEach((item) => {
               let data =  {
                   capital: item[0],
                   premium: item[this.state.age_index]
               };
               // Something is wrong from Here! ....
               this.setState({
                   life_insurance: [data, ...this.state.life_insurance]
               });
           });
        }
};

由于某种原因，我遇到了一些障碍，状态值仅显示最后一项（就像列表没有被填充一样）

有什么想法吗？

Life_Insurance_price_table.jpg

Answer 1

这是基于@FarrukhNormuradov 帮助的更新函数。

createNewArrayLife = (listitem) => {
    const userPricingList = [];
    if (this.state.age_index) {
       listitem.forEach((item) => {
           const data = {
                capital: item[0],
                premium: item[this.state.age_index]
           };
           userPricingList.push(data);
       });
    }
    this.setState({
        life_insurance: userPricingList
    });
};

Answer 2

在第二次阅读时，我意识到您想要存档的内容。
这是我的解决方案。
Here 是环境。

import "./styles.css";
import { Component } from "react";

const insuranceTarifs = [
  ["111.000 €", "25 €", "27 €", "28 €", "31 €", "34 €"],
  ["138.000 €", "32 €", "33€", "35€", "39 €", "42 €"],
  ["238.000 €", "37 €", "39€", "41€", "43 €", "46 €"]
];

const persons = [
  { id: 1, name: "Igor", age: 11 },
  { id: 2, name: "Timur", age: 22 },
  { id: 3, name: "Dilshod", age: 35 },
  { id: 4, name: "Uktam", age: 43 },
  { id: 5, name: "Zarnigor", age: 56 }
];

export default class App extends Component {
  state = {
    life_insurance: []
  };

  handleOnAgeMatch = (calculation) => {
    if (
      !this.state.life_insurance.find(
        (element) => element.id === calculation.id
      )
    ) {
      this.setState({
        life_insurance: [calculation, ...this.state.life_insurance]
      });
    }
  };

  render() {
    const ageElements = persons.map((person) => (
      <li key={person.id}>
        <Person person={person} onAgeMatchHandler={this.handleOnAgeMatch} />
      </li>
    ));

    const pricePickers = this.state.life_insurance.map((list) => (
      <PricePicker userPricingList={list} />
    ));

    return (
      <div className="App">
        <div className="item">
          <ul>{ageElements}</ul>
        </div>
        <div className="item">
          <ul>{pricePickers}</ul>
        </div>
      </div>
    );
  }
}

const PricePicker = ({ userPricingList }) => {
  const options = userPricingList.customPricingList.map((item) => (
    <option key={item.premium} value={item.premium}>
      {item.premium}
    </option>
  ));
  return (
    <li>
      <select id={userPricingList.id}>{options}</select>
    </li>
  );
};

const Person = ({ person, onAgeMatchHandler }) => {
  let index = null;
  const { age, id, name } = person;
  if (age < 25) {
    index = 1;
  }
  if (age < 30 && age > 24) {
    index = 2;
  }
  if (age < 40 && age > 29) {
    index = 3;
  }
  if (age < 45 && age > 39) {
    index = 4;
  }
  if (age > 45) {
    index = 5;
  }

  const userPricingList = [];
  insuranceTarifs.forEach((tarif) => {
    const data = {
      capital: tarif[0],
      premium: tarif[index]
    };
    userPricingList.push(data);
  });

  onAgeMatchHandler({ id, customPricingList: userPricingList });

  return (
    <div>
      {name} {age} y.o.
    </div>
  );
};