單擊按鈕時如何從數組中獲取隨機元素？

Question

我有一個 Q/A 對象的 reducer 數組。 我將它們設置為兩個不同的 div。 我需要我的“下一步”按鈕來觸發 function，它將生成一個隨機數，該隨機數將確定從陣列中顯示的下一個 object。 “下一步”按鈕成功觸發function，function成功創建隨機數，但問答道具並沒有根據隨機數發生變化。 如何生成隨機數並使用該數字從數組中選擇 object？

這是我的代碼GitHub

Answer 1

首先，我將擺脫 class 結構，改用功能組件。 其次，擺脫 setState 等使用較新的 React 鈎子： https://reactjs.org/docs/hooks-state.html

您的代碼可讀性將大大提高。

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>
    )
}

Answer 2

聲明一個 state randomNumber並使用setState更新它。 當你的 state 更新時，React 會重新渲染。

嘗試這個

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);