Estoy trabajando en una prueba que, dependiendo de la respuesta dada, debería devolver una cadena (arriba, abajo o media) que agrego después en un className en mi componente para mostrar el icono correcto.

¿Alguien puede decirme qué estoy haciendo mal en esta lógica? Ambos argumentos (respuesta e id) están mejorando hasta este punto y puedo leerlos. Pero las declaraciones if simplemente las ignoran y salta directamente a la declaración else (que siempre da "abajo").

Esta es la lógica que escribí:

export const checkAnswer = (answer, id) => {
if ((answer === 'Nein') && (id === '0' || id === '3' || id === '5')) {
  return 'up';
} else if ((answer === 'Ja') && (id === '1' || id === '2' || id === '4' || id === '6')){
  return 'up';
} else if (answer === 'Weiß nicht') {
  return 'medium';
} else {
  return 'down';
}

Agradezco la ayuda de alguien.

Gracias por su ayuda chicos. Aquí está además el código donde estoy pasando los argumentos:

questions.map(question => {
    if (checkAnswer(question.answer, question.id) === 'up') {
      correctAnswers += 1;
      debugger
    }
    if (
      (question.category === 'Effektivkosten' || 'Rentenfaktor') &&
      question.answer === 'Nein'
    ) {
      correctAnswers += 2;
    }

    if (question.winner && question.answer === 'Ja') {
      winnerAnswer = true;
    }
  });

Y así es como están estructuradas todas las preguntas:

{
    id: 0,
    category: 'Effektivkosten',
    text: 'Sind die Effektivkosten höher als 1,5%?',
    shortText: 'Über 1,5% p.A.',
    answer: '',
    options: [
      {
        id: 1,
        name: 'Ja'
      },
      {
        id: 2,
        name: 'Nein'
      },
      {
        id: 3,
        name: 'Weiß nicht'
      }
    ]
  },

Y aquí la tabla donde leí la "cadena" y la agregué a className:

 <table>
                  <tbody>
                    {questions.map((question, index) => (
                      <tr key={question.id}>
                        <td className="name">
                          <strong>{question.category}:</strong>
                        </td>
                        <td className="shortName">{question.shortText}</td>
                        <td>
                          <i
                            className={`icon-thumb icon-thumb__${checkAnswer(
                              question.answer,
                              question.id
                            )}`}
                          />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
1
Carlos del Río Francés 28 oct. 2019 a las 17:50

3 respuestas

La mejor respuesta

Como se señaló en los comentarios, está utilizando una comparación estricta para verificar si la identificación es '1', '2', '3', pero sus identificadores son en realidad números (según la estructura de preguntas que al corriente).

Con una comparación estricta, si sus entradas son números, debe compararlos con números, no con cadenas.

Es decir

export const checkAnswer = (answer, id) => {
if ((answer === 'Nein') && (id === 0 || id === 3 || id === 5)) {
  return 'up';
} else if ((answer === 'Ja') && (id === 1 || id === 2 || id === 4 || id === 6)){
  return 'up';
} else if (answer === 'Weiß nicht') {
  return 'medium';
} else {
  return 'down';
}
0
Federico klez Culloca 28 oct. 2019 a las 15:12

Usaría incluye para verificar múltiples identificaciones

export const checkAnswer = (answer, id) => {
if ((answer === 'Nein') && ([0,3,5].includes(id))) {
   return 'up';
} else if ((answer === 'Ja') && ( [1,2,4,6].includes(id) )){
  return 'up';
} else if (answer === 'Weiß nicht') {
  return 'medium';
} else {
  return 'down';
}

También puede usar [1,2,4,6] .includes (parseInt (id)) para superar la verificación de tipos

0
Varun S 28 oct. 2019 a las 15:01

Tal vez estás pasando la identificación como número entero y estás estrictamente verificando que coincida con una cadena (5 contra '5') - Dragoş Paul Marinescu hace 16 minutos

0
Carlos del Río Francés 28 oct. 2019 a las 15:14