javascript - 在 React js 中从对象创建一个选择选项

Question

我是 React-Redux 的新手。我其实知道这个问题是一个非常基本的问题，

在这里，我有一个类似的对象，

questionsCount : [ {
    Id : "CSS"
    count: "1",
    level:"Easy",
    type: Non_code},{
    Id : "CSS"
    count: "2",
    level:"Medium",
    type: code},
    {
    Id : "CSS"
    count: "5",
    level:"Tough",
    type: code},
    {
    Id : "java"
    count: "2",
    level:"Tough",
    type: Non-code},
    {
    Id : "Html"
    count: "4",
    level:"Easy",
    type: code},]

现在，我有一个选择下拉列表，我想在其中创建一个选项，所以我尝试了

return this.state.questionsCount.map((item) =>
            <option key={item.Id}>{item.Id}</option>
        );

 In the props I get the level type.

现在，这是使用重复 ID 创建所有选项元素的过程。

现在，我想做的是，

选项元素将类似于，首先它应该只提供级别元素的含义，

css code:0,Non_code:1

所以，目前它正在被复制。

它被重复，因为 Id 被重复。谁能帮我这个 ？谢谢

在这里，我有那个对象。现在，在该对象中有多个具有 Id 、 count 、 level 和 type 的对象。

现在，我想从这个对象中创建选择选项。

它具有三个差异级别。

预期输出如下， 它将只有简单的级别

<option>Css code:0,non_code-1></option>
<option>Html code:4,non_code-0></option>

对于艰难的选择，

<option>Css code:5,non_code-1></option>
<option>java code:0,non_code-2></option>

中等和困难的情况相同。

一种技术可以具有简单、中等或困难类型的代码类型或非代码类型问题。因此，我想根据级别创建该技术的下拉菜单。

如果代码或非代码不存在，则其值为 0。

Answer 1

根据我对您的情况的了解，您希望根据难度级别创建一个选择下拉列表。为了实现这一点，您需要在渲染之前首先根据困难来过滤我们的问题，例如

processQuestions(questionsCount, difficulty) {
  const res = questionsCount.filter(item => item.level === difficulty);
  return res.reduce((acc, item) => {
     if (acc[item.Id]) {
        acc[item.Id] = { ...acc[item.Id], [item.type]: acc[item.Id][item.type]? acc[item.Id][item.type] + 1 : 1};
     } else {
        acc[item.Id] = { [item.type]: 1};
     }
     return acc;
  }, {})
}
render() {
   const { difficulty } = this.props;
   const questionsData = this.processQuestions(this.state.questionCount, difficulty);
   return Object.entries(questionsData).map(([questionId, data]) => {
        return (
           <option key={questionId}>{questionId} code: {data.code} non_code: {data['Non-code']}</option>
        ) 
   })
}