从State React.JS渲染随机项

Question

Given some items stored in state, I want to be able to click a button and display a random item from that array. So far it only works on the first click and then it displays the same one letter after the first click.

What exactly is going on?

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

You're overwriting the notes array in state in your handleClick method. Try using a different key (something like activeNote ) in handleClick , then use that in your render method rather than this.state.notes .

Answer 2

Add selected note handling

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

So I think I solved it.

I ended up adding another state key randomWord and setting it equal to '' .

I then set the state of randomWord to that of this.state.notes when randomized.

Finally, I rendered this.state.randomWord

No clue if that's the correct approach but it's a working solution, lol.