질문

[쿄쿄]

제가 리엑트로 프로젝트 하나 만들고 있습니다  일종의 심리테스트

Main.js에서 radio 이용해서 버튼 누르고
score 합산해서 그 결과를 Result.js에서 보여주려고 해요

하지만 보시다시피 case마다 점수가 다를 뿐만 아니라,,
data.js에 심리테스트 문항들이 있는데, 4,5,7,8번 문항은 else 구문안으로 들어가서 점수가 달라져요

이럴때 Result에 뭐라고 코드를 구현해야 할까요?

Result.js 일부 -----------------

function Result( {values}) {
  // 결과를 계산할 때 사용할 상태 변수
  const totalScore = 0;

  // 사용자의 답변을 기반으로 결과를 계산하는 함수
  const calculateScore = (questionId, value) => {
    const spec = [4, 5, 7, 8];
    let score;

    if (spec.includes(questionId)) {
      switch (value) {
        case '전혀':
          score = 3;
          break;
        case '가끔':
          score = 2;
          break;
        case '자주':
          score = 1;
          break;
        case '항상':
          score = 0;
          break;
        // default:
        //   score = 0;
      }
    } else {
      switch (value) {
        case '전혀':
          score = 0;
          break;
        case '가끔':
          score = 1;
          break;
        case '자주':
          score = 2;
          break;
        case '항상':
          score = 3;
          break;
        // default:
        //   score = 0;
      }
    }

    totalScore += score;
   
  };

긴글 읽어주셔서 감사합니다.

[codingapple]

이제 원할때 calculateScore실행하면 잘될거같은데요 totalScore 는 변수말고 state로 만듭시다

[쿄쿄]

근데도 안되서요..

import React, { useState } from 'react';

function Result (questionId, value)  {
  // 결과를 계산할 때 사용할 상태 변수
  let [score, totalScore] = useState(0);
  
    const spec = [4, 5, 7, 8];
    //let score;

    if (spec.includes(questionId)) {
      switch (value) {
        case '전혀':
          score = 3;
          break;
        case '가끔':
          score = 2;
          break;
        case '자주':
          score = 1;
          break;
        case '항상':
          score = 0;
          break;
        default:
          score = 0;
      }
    } else {
      switch (value) {
        case '전혀':
          score = 0;
          break;
        case '가끔':
          score = 1;
          break;
        case '자주':
          score = 2;
          break;
        case '항상':
          score = 3;
          break;
        default:
          score = 0;
      }
    }
    
    totalScore += score;
  
 

  return (
    <div>
      <h1>결과</h1>
      <div> 총 점수 : {totalScore}</div>
    </div>
  );
  
  }
export default Result;

[codingapple]

Result는 컴포넌트로 쓸지 점수계산용 함수로 쓸지 택1만 합시다 
유저가 선택한 답변들 저장할 array state 만들어두고
array state에 있던 자료들마다 switch문 적용하면 총점 나올듯요 

[쿄쿄]

gpt한테 물어봐도 감이 너무 안잡혀요... 조금만 알려주세요......ㅠㅠㅠ

[codingapple]

맨위에 values에 유저가선택한값들 array자료로 들어오는거면
values 반복문돌려가면서 하나씩 calculateScore() 적용하면 끝날거같은데요  
감잡아서 코딩하면 안되고 어떤 식으로 동작할지 정확히 적어둡시다 

[쿄쿄]

유저가 선택한 값들이 객체라서
// Main.js 일부분

let change = (questionId, value) => {
    setAnswer({
      ...answer,
      [questionId]: value
    });
    
    let arr = [ questionId,value];
    console.log(arr);
  };

을 이렇게 했습니다.

그리고 위에 같이 result.js를 했는데
 function () { [native code] }0 라고 뜹니다...ㅠㅠㅠ

[codingapple]

함수 실행이아니라 이름만 출력하면 그런게 뜹니다

[쿄쿄]

배열형태로 만들었는데,
main에서 result로 넘어가면 undefined라고 뜹니다..
분명 넘어가게 했는데...

function result () {
 console.log(Main.arr);

살려주세요ㅠ.ㅠ

[codingapple]

새로고침되면 state 리셋되어서 그럴수도요 이동은 navigate()로 합시다

[글쓴이]

글