如何在 React 状态中更新数组的奇异值

Question

我正在创建我的事件处理程序以允许在 React 中以数组状态存储的投票，但我被卡住了。

经过一些研究，我尝试使用另一个数组进行更新，然后将 setState 与新数组一起使用，但这是不正确的

 const App = props => {
 const [selected, setSelected] = useState(0);
 let [votes, setVotes] = useState([1, 2, 3, 4, 5, 6]);
 let newArray = [...votes];
 const handleVote = () => {
  newArray[selected] += 1;
  setVotes([newArray]);
   }; 
 return (
   <div>
     <div>{props.anecdotes[selected]} </div>
     <div>has {votes[selected]} votes</div>

     <div>
       <Button onClick={handleVote()} text="vote" />
       <Button onClick={randomAnecdote} text="next anecdote" />
     </div>
  </div>
   );
   };

预计会增加投票 [0] 的值，其中我使用 0 作为从状态中选择的增加一但我得到了一个无限循环。 之前也只是在数组末尾添加了 1

Answer 1

更新投票

您的handleVote方法的问题在于，当您调用setVotes ，您会像这样调用它： setVotes([newArray]) ，将[newArray]作为参数传递。 因此，在第一次通过时，您将votes设置为[[2, 2, 3, 4, 5, 6]] ，然后在第二次通过时您将获得votes[0] ，即[2, 2, 3, 4, 5, 6]并将其加1 ，这将导致字符串连接，因此您将["2,2,3,4,5,61"]作为newArray 。

要解决此问题， setVotes([newArray])更改为setVotes(newArray) 。

无限循环

您将投票按钮的onClick handleVote设置为等于handleVote的输出而不是等于handleVote本身。 因此，当您定义投票按钮的onClick handleVote时，您正在调用handleVote 。 所以在每次渲染时handleVote都会被立即调用，更新状态，并触发重新渲染——因此是无限循环。

您可以通过更改来解决此问题：

<Button onClick={handleVote()} text="vote" />

到：

<Button onClick={handleVote} text="vote" />