nextjsとreact日記8～9

自分用のメモです。

8.間違いがクリックされても4択の数字が更新され、仕様どおりにならなかった。

export const OneQuestionAndAnswer2 = () => {

  const [ques_num, ques_numSet] = useState(0);
  const [ques_boolean, ques_booleanSet] = useState('');
      
  return (
          <>
          <p className="text-2xl font-bold text-600">{ques_num + 1} 問目</p>
          <div className="FiveTables">
            <p className="text-2xl font-bold text-blue-600">No {FiveTables[ques_num].id}  :  {FiveTables[ques_num].num1} × {FiveTables[ques_num].num2} = </p>
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
              <FourAnswer_b array_a={Num99s5} num_a={3} num_b={FiveTables[ques_num].answer} ques_num={ques_num} ques_numSet={ques_numSet} ques_booleanSet={ques_booleanSet} />  
            </main>
          </div>
          <p className="text-2xl font-bold text-red-600">{ques_boolean}</p>
          </>
  );
}

//array_aは配列、Num99s5配列が入る。num_aは間違いの個数が入る、3が指定されている。num_bは正解が入る。
const FourAnswer_b = (props:any) => {
  const list = RandomSelected(props.array_a, props.num_a, props.num_b);

  list.push(props.num_b);

  const shufflelist = shufflesArray(list); 

  const handleClick4 = (OneTable:any) => {
    if(OneTable === props.num_b){
      if(props.ques_num < 8){
        console.log('正解。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした');
        
        props.ques_numSet(props.ques_num + 1); 
        props.ques_booleanSet('正解。' + OneTable + 'がクリックされました。'); 
      } else {
        console.log('正解。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした。おしまい');
        props.ques_booleanSet('正解。' + OneTable + 'がクリックされました。おしまい'); 
      }
    } else {
      console.log('間違い。' + OneTable + 'がクリックされました')
      props.ques_booleanSet('間違い。' + OneTable + 'がクリックされました'); 
    }
  };

  return (
    <>
    {shufflelist.map((OneTable) => {
      return (
        <button onClick={() => handleClick4(OneTable)}><div className="bg-red-100 p-5">{OneTable}</div></button>
      );
    })}      
    </>
  );
};

9.正解した時だけ、4択も更新されるようになった。想定された仕様どおりになったが、Unhandled Runtime Errorが出る問題が直らない。

export const OneQuestionAndAnswer3 = (props:any) => {
  const [ques_num, ques_numSet] = useState(0);
  const [ques_boolean, ques_booleanSet] = useState('');

  const handleClick4 = (OneTable:any) => {
    if (OneTable === props.ShinFiveTables[ques_num].answer){
      if (props.ShinFiveTables[ques_num].id < 9){
        ques_booleanSet('正解。' + OneTable + 'がクリックされました。'); 
        ques_numSet(ques_num + 1); 
      } else {
        ques_booleanSet('正解。' + OneTable + 'がクリックされました。おしまい'); 
      }
    } else {
      ques_booleanSet('間違い。' + OneTable + 'がクリックされました。'); 
    }
  };

  return (
          <>
          <p className="text-2xl font-bold text-600 mb-8">{props.ShinFiveTables[ques_num].id} 問目</p>
          <p className="text-2xl font-bold text-blue-600">{props.ShinFiveTables[ques_num].num1} × {props.ShinFiveTables[ques_num].num2} = </p>
          <div className="FiveTables">
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
              <button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep1)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep1}</div></button>
              <button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep2)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep2}</div></button>
              <button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep3)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep3}</div></button>
              <button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep4)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep4}</div></button>
            </main>
          </div>
          <p className="text-2xl font-bold text-red-600">{ques_boolean}</p>
          </>
  );
}