javascript - How do I get a random element from an array when a button is clicked? - Stack Overflow

admin管理员组

文章数量:1317915

I have a reducer array of Q/A objects. I have them set to two different divs. I am needing my "Next" button to trigger a function that will generate a random number that will determine the next object to be displayed from the array. The "Next" button is successfully triggering the function, and the function is successfully creating a random number, but the question and answer props are not changing based on the random number. How do I generate a random number and use that number to choose an object from an array?

Here is my code GitHub

I have a reducer array of Q/A objects. I have them set to two different divs. I am needing my "Next" button to trigger a function that will generate a random number that will determine the next object to be displayed from the array. The "Next" button is successfully triggering the function, and the function is successfully creating a random number, but the question and answer props are not changing based on the random number. How do I generate a random number and use that number to choose an object from an array?

Here is my code GitHub

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow asked Jul 3, 2020 at 6:34 JustinJustin 38122 gold badges55 silver badges66 bronze badges 2

• 1 React listen changes on state variable, not all variables. You need to setState and use this.state.randomNumber instead of this.randomNumber. – Vahid Alimohamadi Commented Jul 3, 2020 at 6:39
• Another problem is using direct dom changes. Don't do that when you are using React. – Vahid Alimohamadi Commented Jul 3, 2020 at 6:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

First of all I would get rid of the class structure, use a functional ponent instead. Second, get rid of the setState etc. use the newer React hooks: https://reactjs/docs/hooks-state.html

Your code readability will improve greatly.

import React, {useState} from "react";

const questionAnswer: [
    {question: "Question 1", answer: "Answer 1"},
    {question: "Question 2", answer: "Answer 2"},
    {question: "Question 3", answer: "Answer 3"},
    {question: "Question 4", answer: "Answer 4"}
];

export const FlashCards = ({questionAnswer}) => {
    
    const [randomNumber, setRandomNumber] = useState(0)
    
    const flipDisplay = () => {
        // Logic flip display here.
    }
    
    const generateRandomNumber = () => {
        const randomNumber = Math.floor(Math.random() * questionAnswer.length);
        setRandomNumber(randomNumber)
    }

    return (
        <div className='ui container'>
            <div id='question'>
                {questionAnswer[randomNumber].question}
            </div>
            <div id='answer' style={{display: 'none'}}>
                {questionAnswer[randomNumber].answer}
            </div>
            <div>
                <button className='ui button' onClick={flipDisplay}>Flip</button>
                <button className='ui button' onClick={generateRandomNumber}>Next</button>
            </div>
        </div>
    )
}

Declare a state randomNumber and update that using setState. React would re-render when your state updates.

Try this

import React from 'react';
import { connect } from 'react-redux';


class FlashCards extends React.Component {

    state = {
       randomNumber: 0
    }

    randomQuestion = (arry=[]) => {
        var num = Math.floor(Math.random() * arry.length);
        //const display = arry[Math.floor(Math.random() * arry.length)];
        this.setState({randomNumber: num});
    }


    flipDisplay = () => {
        // your flipDisplay function, no changes here
    }


    render() {
        return(
            <div className='ui container'>
                <div id='question'>
                { this.props.questionAnswer[this.state.randomNumber].question }
                </div>
                <div id='answer' style={{ display: 'none' }}>
                { this.props.questionAnswer[this.state.randomNumber].answer }
                </div>
                
                <div>
                    <button className='ui button' onClick={this.flipDisplay}>Flip</button>
                    <button className='ui button' onClick={() => this.randomQuestion(this.props.questionAnswer)}>Next</button>
                </div>
            </div>
        );
    }
}




const mapStateToProps = (state) => {
    return {
        questionAnswer: state.questionAnswer
    };
}

export default connect(mapStateToProps)(FlashCards);

本文标签： javascriptHow do I get a random element from an array when a button is clickedStack Overflow