如何在 React State 中更新 Array 的奇异值

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>
   );
   };

预计会增加 votes[0] 的值，其中我使用从状态中选择的 0 增加一，但我得到一个无限循环。 ALso 之前只是将 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 本身。因此，当您定义投票按钮的 onClick 属性时，您正在调用 handleVote。因此，在每次渲染时，handleVote 都会立即被调用，更新状态并触发重新渲染——因此是无限循环。

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

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

到：

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