Question

鉴于存储在状态中的一些项目，我希望能够单击一个按钮并显示该数组中的随机项目。到目前为止它只适用于第一次点击，然后在第一次点击后显示相同的一个字母。

到底发生了什么？

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      notes: ['hey', 'yo', 'sup'],
      clicked: false
    }
  }

  handleClick = () => {
    this.setState({
      clicked: true, 
      notes: this.state.notes[Math.floor(Math.random() * 
this.state.notes.length)]
    })
  }

  render() {    
    return (
      <div className="App">
        <button onClick={this.handleClick}>Random Note</button>
        <h1>{this.state.clicked ? this.state.notes : ''}</h1>
      </div>
    )
  }
}

Answer 1

您正在覆盖notes方法中的handleClick数组状态。尝试在activeNote中使用其他键（例如handleClick），然后在渲染方法中使用它，而不是this.state.notes。

Answer 2

添加选定的笔记处理

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      notes: ['hey', 'yo', 'sup'],
      selectedNote: null,
      clicked: false
    }
  }

  handleClick = () => {
    this.setState({
      clicked: true, 
      selectedNote: this.state.notes[Math.floor(Math.random() * 
this.state.notes.length)]
    })
  }

  render() {    
    return (
      <div className="App">
        <button onClick={this.handleClick}>Random Note</button>
        <h1>{this.state.clicked && this.state.selectedNote}</h1>
      </div>
    )
  }
}

Answer 3

所以我想我解决了。

我最后添加了另一个状态键randomWord并将其设置为''。

然后我随机化时将randomWord的状态设置为this.state.notes的状态。

最后，我渲染了this.state.randomWord

不知道这是否是正确的方法，但它是一个有效的解决方案，哈哈。

从状态React.JS渲染随机项

3 个答案: