Stateで管理している値を数値に変換したいが文字列として扱われてしまう事象について

数値として扱いたいが文字列になってしまう事象について

今回やりたかったこと

• 登録ボタンを押すたびに学習時間に入力した数値が合計時間として累計で加算して表示されるようにしたい。

今回の問題

• 合計時間の下に表示している学習内容と学習時間に入力した値が入る配列を更新するときに数値として扱えていない点
• 配列に追加する際に入力した学習時間の数値に時間という文字列をつけて合計時間には時間を付加させたくないが１時間/1000のように数値の後に時間の文字列がくっついてしまう点

下の問題のファイルで文字列として扱われてしまったときのコード

App.jsx

const handleRegister = () =>{
    if(!inputs.content ||!inputs.time){
      setError("入力されていない項目があります。");
    }
    else{
      const newRecord = {title:inputs.content,time:`${parseInt(inputs.time, 10)}時間`}
      const newRecords = [...records,newRecord];
      setReCords(newRecords);
    setInputs({content:"", time:""});
    setError("");

    //合計時間を計算
      const newTotalTime = newRecords.reduce((sum, record)=> sum + record.time, 0);
      serTotalTime(newTotalTime);
  }
  };

実行結果

修正するにあたって

• parseIntの結果を文字列に変換するのではなく、配列に追加してコンポーネントファイルで画面表示行う際に時間を付加すること
  ⇒表示側と処理側を切り分けて書いていくことにする。

想定通り動いた際のコード

App.jsx

const handleRegister = () =>{
    if(!inputs.content ||!inputs.time){
      setError("入力されていない項目があります。");
    }
    else{
      const newRecord = {title:inputs.content,time:parseInt(inputs.time, 10) }
      const newRecords = [...records,newRecord];
      setReCords(newRecords);
    setInputs({content:"", time:""});
    setError("");

    //合計時間を計算
      const newTotalTime = newRecords.reduce((sum, record)=> sum + record.time, 0);
      serTotalTime(newTotalTime);
  }
  };

ListDisplay.jsx

//timeを文字列としてフォーマットする関数
const formatTime = (time)=>`${time}時間`;

export const ListDisplay = (props)=>{
    const {recordList} =props;
    return(
        <ul style={{listStyle:"none"}}>
        {recordList.map((record, time)=>
        (
           <li key={time}>
            <p>{record.title}{formatTime(record.time)}</p>
           </li>
        )
       )}
         </ul>
    );
}

実行結果