Почему я получаю NaN?Приложение работает, но отправной точкой является NaN.Как я могу решить это? - PullRequest
Новая
       12

Почему я получаю NaN?Приложение работает, но отправной точкой является NaN.Как я могу решить это?

0 голосов
/ 23 сентября 2019

Когда я запускаю это приложение, оно работает, но вместо 0 или чего-либо еще я получаю NaN как среднее и положительное значение.Если я нажимаю на кнопки, я получаю точные значения.Приложение работает, но я не знаю, как удалить этот NaN, когда я снова запускаю приложение 

import React, { useState } from 'react';
import { Table } from 'reactstrap';
import './App.css';


const App = () => {
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  const handleGood = () => {
   setGood(good + 1)
  }

  const handleNeutral = () => {
    setNeutral(neutral + 1)
   }

  const handleBad = () => {
   setBad(bad + 1)
  }

  const average =  (((good-bad)/(good + neutral + bad))*100).toFixed(1);
  const positive = ((good / (good + neutral + bad))*100).toFixed(1);

  if (average < 0) {
    alert('Your score is lower then 0')
  }
  return (
    <div className="container mt-5">
          <h1 className="text-center pb-2">Stankove ocene</h1>
      <Table bordered hover>
        <thead>
          <tr className="text-center">
            <th>#</th>
            <th><button className="btn btn-success" onClick={handleGood}>Good</button></th>
            <th> <button className="btn btn-primary" onClick={handleNeutral}>Neutral</button></th>
            <th><button className="btn btn-danger" onClick={handleBad}>Bad</button></th>
            <th><h5>Overall Feedback</h5></th>
            <th><h5>Average</h5></th>
            <th><h5>Positive</h5></th>
          </tr>
        </thead>
        <tbody>
          <tr className="text-center">
            <th scope="row">Feedback</th>
            <td><p>{good}</p></td>
            <td><p >{neutral}</p></td>
            <td><p>{bad}</p></td>
            <td><p>{good + neutral + bad}</p></td>
            <td><p>{average}%</p></td>
            <td><p>{positive}%</p></td>
          </tr>

        </tbody>
      </Table>


     </div>

  )
}


export default App;

У меня нет ошибок, я просто не хочу избавиться от NaN и установить значение в ноль.Все еще работаю над этим приложением, поэтому я не сделал ни одного компонента внутри компонента, поэтому он немного грязный.

Спасибо за внимание.

Ответы [ 3 ]

3 голосов
/ 23 сентября 2019

0/0 вообще не имеет разумной интерпретации, следовательно, NaN.

2 голосов
/ 23 сентября 2019

Проблема здесь в том, что во время инициализации все ваши значения состояния равны 0, поэтому, когда вы делаете (good-bad)/(good + neutral + bad) в первый раз, оно оценивается как 0/0, а деление на 0 возвращает NaN.

Также обратите внимание, что в случае таких счетчиков, если вам нужно увеличить текущее состояние, лучше использовать функциональную форму setState, так как она всегда будет получать самое последнее значение состояния:

const handleGood = () => {
  setGood(currentGood => currentGood + 1)
}

Один из способов исправить это - проверить, делите ли вы методы 0 и вернуть по умолчанию 0: 

const formatValue = (val) => (val * 100).toFixed(1);

// Return array of values, where 1st item is average and second is positive
const getValues = () => {
  const divider = good + neutral + bad;
  if (divider === 0) {
    return ['0', '0'];
  }

  return [formatValue((good - bad) / divider), formatValue(good / divider)]
}

Использование с Разрушение массива : 

const [avg, positive] = getValues();
0 голосов
/ 23 сентября 2019

Я думаю, что это может быть потому, что вы пытаетесь разделить на 0. Если вы измените одно из своих значений хорошего, плохого или нейтрального на 1, он начнет показывать числа.

...