React如何使用当前state值作为数组下标实现对应条目投票计数功能

现有代码的问题 #

• 你定义的ary投票数组没有作为React状态管理：直接在函数组件内部声明普通变量，每次组件重新渲染时都会被重置为全0的初始值，投票数据无法持久保存。
• selected本身就是number类型的状态值，不是状态对象，不需要加.state后缀，直接用selected作为数组下标即可。
• 投票按钮的点击逻辑错误：你只写了ary[selected.state] + 1，既没有把计算结果赋值回数组，也没有触发组件重新渲染，页面不会更新投票数。
• 随机数生成范围错误：你的anecdotes数组总共有7条数据，Math.random() * 6只能生成0~5的整数，永远无法访问到下标为6的最后一条名言。

修正后的实现代码 #

import React, { useState } from 'react'

const App = () => {
  const anecdotes = [
    '如果觉得疼，就多做几次',
    '给延期的软件项目加人手只会让它更晚交付',
    '代码的前90%占了开发时间的前10%，剩下的10%代码占了另外90%的开发时间',
    '傻瓜都能写出计算机能理解的代码，优秀的程序员能写出人类能理解的代码',
    '过早优化是万恶之源',
    '调试的难度是写代码的两倍。如果你把代码写得尽可能精巧，那从定义上来说，你不够聪明去调试它',
    '编程时不大量用console.log，就和医生诊断病人时拒绝用X光或验血一样'
  ]
   
  const [selected, setSelected] = useState(0)
  // 投票数组用useState声明，长度和anecdotes一致，初始值全为0
  const [votes, setVotes] = useState(new Array(anecdotes.length).fill(0))

  return (
    <div>
      <h1>{anecdotes[selected]}</h1>
      {/* 随机数范围改为乘以anecdotes的长度，适配数组长度变化 */}
      <button onClick={ () => setSelected(Math.floor(Math.random() * anecdotes.length)) }>下一条名言</button>
      
      <button onClick={ () => {
        // 拷贝原投票数组，修改对应下标的值后更新状态
        const newVotes = [...votes]
        newVotes[selected] += 1
        setVotes(newVotes)
      } }>投票</button>
      <p>投票数：{votes[selected]}</p>
    </div>
  )
}

export default App

核心逻辑说明 #

• 投票数组使用useState管理，修改时需要先拷贝原数组再更新，避免直接修改原状态导致的渲染异常。
• 随机数生成直接使用anecdotes.length作为乘数，后续新增名言不需要手动修改随机数范围。
• 直接用selected作为数组下标访问对应名言的投票数，符合你最初的设计逻辑，这个思路本身是可行的，只是实现细节有问题。

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