Почему выводится NaN и как это исправить?

Question

В начале значение positive равно NaN, потом, после того как добавляется positive, bad или neutral, NaN меняет значение:

import React, {useState} from 'react';
    
    const App = () => {
        const [good, setGood] = useState(0)
        const [neutral, setNeutral] = useState(0)
        const [bad, setBad] = useState(0)
    
      return (
          <div>
              <>
                  <h1>give feedback</h1>
                  </>
            <div>
                <button onClick={() => setGood(good + 1)}>
                    good
                </button>
    
                <button onClick={() => setNeutral(neutral + 1)}>
                neutral
                </button>
    
                <button onClick={() => setBad(bad + 1)}>
                    bad
                </button>
            </div>
              <>
                  <h1>statistics</h1>
                  <ul>
                   <li>good {good}</li>
                      <li>neutral {neutral}</li>
                      <li>bad {bad}</li>
                  </ul>
                  </>
              <div>
                  <p>all {good+neutral+bad}</p>
                  <p>average {(good+neutral+bad)/3}</p>
                  <p>positive {((good / (good + neutral + bad))*100)}</p>
              </div>
          </div>
      )
    }
    
    export default App;

Answer 1

Вы делите 0 на 0 и поэтому получаете NaN, что бы все нормально отображалось при первом рендере можно сделать так:

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

  return (
    <div>
        <h1>give feedback</h1>
        <div>
            <button onClick={() => setGood(good + 1)}>good</button>
            <button onClick={() => setNeutral(neutral + 1)}>neutral</button>
            <button onClick={() => setBad(bad + 1)}>bad</button>
        </div>
        <h1>statistics</h1>
        <ul>
            <li>good {good}</li>
            <li>neutral {neutral}</li>
            <li>bad {bad}</li>
        </ul>
        <div>
            <p>all {good + neutral + bad}</p>
            <p>average {(good + neutral + bad) / 3}</p>
            // начало измененной области
            <p>positive {((good / (good + neutral + bad)) * 100) || 0}</p>
            // конец измененной области
        </div>
    </div>
  )
}

Посмотреть как работает можно на Codesandbox

Answer 2

Потому что начальное значение это

0/0 = NaN

   console.log(0/0);

БЛОГ НА HUSL

Почему выводится NaN и как это исправить?

Ответы (2 шт):