Novato aquí. Estoy tratando de aprender React y actualmente estoy tratando de mostrar el average=(good+bad)/all . Sin embargo, sigo obteniendo NaN , lo cual asumo que obtengo porque los valores de mi estado son todos 0. Estoy confundido en cuanto a por qué esto es porque después de llamar a setClicks(newStats) pensé que las estadísticas estaban actualizadas.
import React, { useState } from "react" const App = () =>{ const [stats,setClicks] = useState({good:0,neutral:0,bad:0,all:0,positive:0,average:0}) const handleGood=()=> { const newStats={ ...stats, all: stats.all +1, good:stats.good +1, average: (stats.good - stats.bad)/stats.all, } setClicks(newStats) console.log("Stats.good",stats.good) console.log("Stats.bad",newStats.bad) console.log("Stats.all",stats.all) } const handleBad=()=> { const newStats= { ...stats, bad: stats.bad+1, all: stats.all+1, average: (stats.good - stats.bad)/stats.all, } setClicks(newStats) } const handleNeutral =() => { const newStats={ ...stats, neutral:stats.neutral +1, all: stats.all+1, average: (stats.good - stats.bad)/stats.all, } setClicks(newStats) } const Button =({handleClick,text})=>{ return( <button onClick={handleClick}>{text}</button> ) } return( <div> <h1>Give Feedback</h1> <Button handleClick={handleGood} text="good"/> <Button handleClick={handleNeutral} text="neutral"/> <Button handleClick={handleBad} text="bad"/> <br/> <h2>Statistics</h2> <p>good: {stats.good}</p> <p>neutral: {stats.neutral}</p> <p>bad: {stats.bad}</p> <p>all:{stats.all}</p> <p>average: {stats.average}</p> <p>positive: {stats.positive}</p> </div> ) } export default App ¿Cuál es la mejor manera de cambiar de estado? ¿Cómo se debe hacer esto para que no aparezca NaN ?
Para el cálculo inicial del promedio, debe usar los valores actualizados:
const handleGood= () => { const newAll = stats.all + 1; const newGood = stats.good + 1; const newStats={ ...stats, all: newAll , good:newGood , average: (newGood - stats.bad)/newAll, } setClicks(newStats); }Estás obteniendo NaN porque estás dividiendo 0/0 y no estás calculando el promedio correctamente. Debe usar nuevos valores buenos, malos, ... para el promedio.
En esta parte de tu código:
const newStats={ ...stats, all: stats.all +1, good:stats.good +1, average: (stats.good - stats.bad)/stats.all, }Estás calculando promedio con los valores antiguos de todos, buenos en tu estado.
Por cierto, agregar Math.abs evita obtener un valor promedio negativo.
Esta es una versión actualizada de su función handleGood.
const handleGood=()=> { const newAll = stats.all +1; const newGood = stats.good +1; const newAverage = Math.abs(newGood-stats.bad)/newGood const newStats={ ...stats, all: newAll, good:newGood, average: newAverage, } setClicks(newStats) console.log("Stats.good",newStats.good) console.log("Stats.bad",newStats.bad) console.log("Stats.all",newStats.all) }