如何在 React 中存储累积值（整数）？答案

【问题标题】：How can I store the accumulated value(integer) in React?如何在 React 中存储累积值（整数）？
【发布时间】：2023-02-10 23:47:40
【问题描述】：

我有一系列轶事和两个按钮。一种是投票，另一种是随机选择下一个轶事。当我点击投票按钮时，投票被视为增加的数字。然而，问题是当我点击下一个轶事时，投票仍然存在，而不是为新的轶事重置回数字零。

我试图通过首先添加一个新属性来存储投票数投票数组为空值“”轶事, anecdotes.forEach(function (anecdote) { anecdote.Vote = "" });然后将增加的投票数推送到数组的新副本const copyAnecdotes = [...轶事]但它没有用。我怎样才能使这项工作？

应用程序.js

import { useState } from 'react'

const inlineParagraph = {
  display: 'inline-flex',
  flexDirection: 'column',
}

const inlineButton = {
  display: 'flex',
  marginTop: '5px',
  gap: '10px',
}

const Button = (props) => {
  return (
    <div>
      <button onClick={props.handleClick}> {props.text} </button>
    </div>
  )
}

const App = () => {

  const handleClick2 = () => {
    setSelected(Math.floor(Math.random()*anecdotes.length))
  }

  const handleVote = () => {
    setVote(vote + 1) 
  }

  const anecdotes = [
    'If it hurts, do it more often.',
    'Adding manpower to a late software project makes it later!',
    'The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
    'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
    'Premature optimization is the root of all evil.',
    'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
    'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients.',
    'The only way to go fast, is to go well.'
  ]
   
  const [selected, setSelected] = useState(0)
  const [vote, setVote] = useState(0)

  const copyAnecdotes = [...anecdotes]

  return (
    <div style={inlineParagraph}>
      { anecdotes[selected] }


      <div style={inlineButton} >
        <Button handleClick={handleClick2} text="next anecdotes" setSelected={setSelected} />
        <Button handleClick={handleVote} text="vote" setSelected={setSelected} /> {vote}
      </div>
    </div>
  )
}

export default App

【问题讨论】：

您永远不会将 vote 设置为 0。为什么您希望它再次成为0？
@Konrad 我希望为一个轶事存储之前累积的选票。 setVote(0) 会将投票重置为零，但是当我再次偶然发现相同的轶事时，投票应该会保留，我可以继续增加之前累积的投票
@Konrad 我怎样才能做到这一点？请帮忙

标签： javascript reactjs

【解决方案1】：

您应该在 handleClick2 函数中重置投票

const handleClick2 = () => {
    setSelected(Math.floor(Math.random()*anecdotes.length));
    setVote(0); 
}

【讨论】：

但是，如果我想为一个轶事存储以前累积的选票怎么办？现在，使用上面的代码，一切都将重置为零。当我再次偶然发现同样的轶事时，投票应该保持不变，我可以继续增加投票

【解决方案2】：

首先你需要一组选票：

const [votes, setVotes] = useState(() => Array(anecdotes.length).fill(0));

然后是添加选票的函数：

const handleVotes = () => {
  setVote((votes) =>
    votes.map((vote, index) => (index === selected ? vote + 1 : vote))
  );
};

并显示正确的投票：

{votes[selected]}

【讨论】：