在React中接收到`children`屬性的NaN-有解無憂

我是 React 的新手，我正在構建一個型別賽車應用程式。我正處于這個階段，我想計算 WPM（每分鐘字數），但由于某種原因，計算回傳“NaN”。我檢查過，每個變數都有正確的值，并且在計算時沒有空值。

一些圖片：在 React 中接收到 `children` 屬性的 NaN

這是 App.js 的代碼：

import React from 'react';
import { useState, useEffect } from 'react';
import './App.css';
import getTime from './CurrentTime.js';




const App = () => {

const [typeracertext, setTyperacertext] = useState("My name is Ruslan. ");
const [userText, setUserText] = useState("");
const [wholeText, setWholeText] = useState("");
const [startTyping, setStartTyping] = useState("");
const [endTyping, setEndTyping] = useState("");
var [countWords, setCountWords] = useState(0);

const wordsPerMinute = (startTime, endTime, words) => {
    return 60 / ({endTime} - {startTime}) * words
}


const onChange = (e) => {
    if (wholeText === "")
    {
        setStartTyping(getTime.getTime);
    }
    if (typeracertext.substring(0, wholeText.length 1).slice(-1) === e.target.value.slice(-1))
    {  
        setUserText(e.target.value);
        e.target.style.color = 'black';
        if (typeracertext.substring(0, wholeText.length 1).slice(-1) === " ")
        {
             e.target.value = "";
             setWholeText(wholeText   " ");
             setCountWords(countWords   1);
        }  

        else
        {
            setWholeText(wholeText   ((e.target.value).slice(-1)));
        }
    }

    else
    {
        e.target.style.color = 'red';
    }

    if (wholeText === typeracertext.substring(0, typeracertext.length-2))
    {
        setEndTyping(getTime.getTime);
        e.target.value = "";
    }
};

return (
    <div className="wrapper">
        <div className="box c">
        <span className="userText">{wholeText}</span>{typeracertext.substring(wholeText.length, typeracertext.length)}

        {endTyping != "" &&
        <span className="wpmUser">{wordsPerMinute(startTyping, endTyping, countWords)}</span>}

);
}

export default App;

和 CurrentTime.js 的代碼

import React from 'react';

const getTime = () => {
    const current = new Date();
      return(current.getHours()*60*60   current.getMinutes()*60   current.getSeconds());  
}

export default {getTime};

編輯：這也是值已通過的證明：在 React 中接收到 `children` 屬性的 NaN

uj5u.com熱心網友回復：

您沒有在設定狀態下呼叫 gettime 。你只是指向它

setStartTyping(getTime.getTime())

和

setEndTyping(getTime.getTime())

以及為什么 starttime 和 endtime 包含在 {} 中。它們是簡單的數字。也許你可以直接做

const wordsPerMinute = (startTime, endTime, words) => {
    return 60 / (endTime - startTime) * words
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/507076.html

標籤：javascript 反应 jsx

上一篇：從其css屬性訪問div

下一篇：開源專案丨ChengYing 1.1版本重磅發布：新增超多功能，全新優化體驗！