React类组件点击按钮随机展示state数组元素异常问题咨询

我帮你分析下问题所在，再给你修正后的代码~

为什么首次点击有效，后续点击只显示同一个字符？ #

从你给出的代码片段和问题现象来看，大概率是这两个原因之一：

• 错误修改了原数组状态：你可能在handleClick里把notes数组直接替换成了选中的单个元素（比如写了notes: this.state.notes[randomIndex]）。第一次点击后，notes就从数组变成了字符串，后续点击时Math.random() * this.state.notes.length会基于字符串的长度计算索引，取到的就是字符串的单个字符，自然一直重复。
• 随机逻辑只执行了一次：如果你的代码依赖clicked状态控制随机逻辑（比如只有clicked为false时才生成随机值），那首次点击后clicked变成true，后续点击就不会重新计算随机索引了，导致一直显示同一个元素。

正确的实现方式 #

我们应该把数据源和当前显示的元素分开存储，不要修改原有的notes数组（它作为数据源应该保持不变），新增一个状态来存当前要展示的随机元素：

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      notes: ['hey', 'yo', 'sup'],
      currentNote: '' // 专门存当前显示的元素
    }
  }

  handleClick = () => {
    // 每次点击都重新生成随机索引
    const randomIdx = Math.floor(Math.random() * this.state.notes.length)
    this.setState({
      currentNote: this.state.notes[randomIdx]
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>随机切换</button>
        {/* 显示当前选中的内容，初始可以提示用户点击 */}
        <p>{this.state.currentNote || '点击按钮开始随机展示'}</p>
      </div>
    )
  }
}

额外小优化 #

如果你希望页面加载时就自动显示一个随机元素，可以在组件挂载完成后调用一次点击逻辑：

componentDidMount() {
  this.handleClick()
}

记住，React状态管理的最佳实践是保持状态的不可变性，不要直接修改原有的数组/对象状态，而是基于原状态生成新的值来更新~

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