在對象中的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創建所有選項元素。

現在，我要做的是

option元素將是這樣的，首先它應該只提供level元素的意思，

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