从另一个对象数组向数组元素添加样式

Question

我有一个数组，表示问题的数字。

还有另一个对象数组，其中包含用户答案(问题编号以及用户的答案是正确还是错误)。

questions = [] // question numbers
validity = [{answer: true, questionNo: "2"},{answer: false, questionNo: "3"}] // user answers array

我想做的是，用绿色突出正确的问题，用红色突出错误的问题。

当validity数组有两条记录时，我尝试了下面的方法，但是，它只突出了最后一条记录：

{
  questions.map((i, index) => {
    let className = '';
    if (validity) {
      validity.map((data) => {
        if (Object.keys(data).length) {
          if ((Number(data.questionNo) === index)) {
            if (data.answer) {
              className = `question-list correct-q` // when answer `true`,set div to green color
            } else {
              className = `question-list wrong-q` // when answer `false`,set div to red
            }
          } else {
            className = `question-list` // default div color
          }
        }
      })
    
    } else {
      className = `question-list`
    }
    return (index != 0) && 
      <div 
        className={className} 
        key={index} 
        onClick={() => onclickQuestion(index)}
      >
        Q - {index}
      </div>
  })
}

​

​

我想同时用绿色给Q-2上色，用红色给Q-3上色。

Answer 1

您可以首先将有效性数组转换为一个对象，其中关键字是问题编号，值是有效性，然后使用Array.prototype.reduce()

const validityObject = validity.reduce((obj, question) => {
  obj[parseInt(question.questionNo)] = question.answer;

  return obj;
}, {});

validityObject

{
  "2": true,
  "3": false
}

现在，您可以简化循环中的逻辑，并使用它来代替嵌套循环，后者更简单、更高效(因为您只需要进行对象查找来检查每个问题的有效性)：

​

const questions = Array.from(Array(20), (_, i) => i + 1);

const validity =[{
  answer: true,
  questionNo: "2"
 },{
  answer: false,
  questionNo: "3"
}];

const validityObject = validity.reduce((obj, question) => {
  obj[parseInt(question.questionNo)] = question.answer;
  
  return obj;
}, {});

document.getElementById('root').innerHTML = questions.map((questionNumber) => {
  const valid = validityObject[questionNumber];

  let className = 'question-list';   

  if (valid === true) {
    className = 'question-list correct-q';
  } else if (valid === false) {
    className = 'question-list wrong-q';
  }
         
  return `
    <div class="${ className }">
     Q - ${ questionNumber }
    </div>
  `;
}).join('');

.question-list {
  border: 2px solid #F0F0F0;
  padding: 8px;
  font-family: monospace;
  margin: 8px 0 0 0;
  border-radius: 4px;
}

.correct-q {
  border-color: green;
}

.wrong-q {
  border-color: red;
}

<div id="root"></div>

​

Answer 2

您可以使用Array.find()查找有效性对象，如下所示：

{
  questions.map((i, index) => {
    let className = 'question-list'; // default
    const answerObj = validity.find(answer => answer.questionNo == index);
    const isValid = answerObj.answer;
    if (isValid) {
      className = 'question-list correct-q' // when answer "true", set div to green color
    } else {
      className = 'question-list wrong-q' // when answer "false", set div to red
    }
  })
  // ...
}