在没有按钮的 ReactJS 中添加数字

Question

添加几个数字似乎是一件容易的事，但如果不使用显式按钮添加数字，我就不会得到任何运气。

  // Defining useState

  const [ totalCount, setTotalCount ] = useState(0)

  // User Can change count of fruits by increment or decrement operator

  const addNum = (apples,mango,orange) => {
    setTotalCount(parseInt(apples) + parseInt(mango) + parseInt(orange))
  }

  console.log("Total Number of Fruits", totalCount)

期望的答案： 0 到 3 之间的某个数字

得到答案： NaN

Answer 1

该组件将跟踪单个项目的数量。 项目的总和是派生状态，不应保存为它自己的状态。 而是即时计算总和 -

 function App({ items = [] }) { const [counts, setCounts] = React.useState(new Map) const update = (key, amount) => event => setCounts(m => new Map(m).set(key, (m.get(key) || 0) + amount)) return <div> {items.map(item => <Item key={item} item={item} count={counts.get(item) || 0} update={update} /> )} total: {[...counts.values()].reduce((a,b) => a + b, 0)} </div> } function Item({ item, update, count }) { return <div> <button type="button" onClick={update(item, -1)} children="➖" /> {item}: {count} <button type="button" onClick={update(item, 1)} children="➕" /> </div> } ReactDOM.render(<App items={["", "", ""]}/>, document.body)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

通用update和sum函数的分解使您可以简化组件逻辑，并允许在程序的其他区域重用这些函数 -

function updateCount(map, key, amount) {
  return new Map(map).set(key, (map.get(key) || 0) + amount)
}

function sum(iter) {
  return [...iter].reduce((a,b) => a + b, 0)
}

function App({ items = [] }) {
  const [counts, setCounts] = React.useState(new Map)
  const update = React.useCallback((key, amount) => event =>
    setCounts(m => updateCount(m, key, amount)),
    []
  )
  return <div>
    {items.map(item =>
      <Item key={item} item={item} count={counts.get(item) || 0} update={update} />
    )}
    total: {sum(count.values())}
  </div>
}