使用React state进行数学运算时parseInt转换失效如何解决

问题核心原因 #

• tip状态从按钮赋值时是0.05、0.1这类小数，你用parseInt转换会直接截断小数部分得到0，导致运算失效
• input输入值默认是字符串类型，你直接赋值给state后，后续如果输入非数字内容、空值，parseInt转换会得到NaN
• 未做除数为0的边界判断，people为0时运算会得到无穷大的异常值

修复步骤 #

1. 赋值时就把输入值转成数字存入state，不需要等到渲染时再转换，修改三个输入框的onChange逻辑：

// Bill输入框
<input type="text" onChange={e=>setBill(Number(e.target.value) || 0)}/>

// 自定义Tip输入框
<input type="text" placeholder='Custom' onChange={e=>setTip((Number(e.target.value) || 0)/100)}/>

// 人数输入框
<input type="text" placeholder='0' onChange={e=>setPeople(Number(e.target.value) || 0)} />

2. 修改渲染时的运算逻辑，移除parseInt，加边界判断避免除0，同时保留两位小数优化金额显示：

{/* 人均小费 */}
<div>{people > 0 ? (bill * tip / people).toFixed(2) : 0}</div>

{/* 人均总金额 */}
<div>{people > 0 ? (bill * (1 + tip) / people).toFixed(2) : 0}</div>

完整修复后代码 #

import { useState } from 'react';

export default function Bill(){
  const [bill,setBill] = useState(0)
  const [tip,setTip] = useState(0)
  const [people,setPeople] = useState(0)

  function reset(){
    setBill(0)
    setTip(0)
    setPeople(0)
  }
    
  return(
    <div>
      <div>Bill
        <input type="text" onChange={e=>setBill(Number(e.target.value) || 0)}/>
      </div>
      
      <div>
        Select Tip %
        <button onClick={()=>setTip(0.05)}>5%</button>
        <button onClick={()=>setTip(0.1)}>10%</button>
        <button onClick={()=>setTip(0.15)}>15%</button>
        <button onClick={()=>setTip(0.25)}>25%</button>
        <button onClick={()=>setTip(0.5)}>50%</button>
        <input type="text" placeholder='Custom' onChange={e=>setTip((Number(e.target.value) || 0)/100)}/>
      </div>
    
      <div>
        Number of People
        <input type="text" placeholder='0' onChange={e=>setPeople(Number(e.target.value) || 0)} />
      </div>

      <div>
        <div>
          Tip Amount /person
          <div>{people > 0 ? (bill * tip / people).toFixed(2) : 0}</div>
        </div>
        <div>
          Total /person
          <div>{people > 0 ? (bill * (1 + tip) / people).toFixed(2) : 0}</div>
        </div>
        <button onClick={reset}>Reset</button>
      </div>
    </div>
  )
} 

内容的提问来源于stack exchange，提问作者miouri