单击 ReactJS 时按钮仅工作一次

Question

I have created a random quote machine project in React with functional component. When I click on new quote it works only once. This is one of the freecodecamp challenge project. Here, I am trying to get new quote every time I click on the new quote button. I am unable to spot the issue. Please help.

import React, {useState} from "react";
import {Button, Card, Col, Container, Row} from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTwitter } from "@fortawesome/free-brands-svg-icons";

const quotes = [
  {
    quote: "The greatest glory in living lies not in never falling, but in rising every time we fall.",
    author: "Nelson Mandela"
  },
  {
    quote: "The way to get started is to quit talking and begin doing.",
    author: "Walt Disney"
  },
  {
    quote: "Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking." ,
    author: "Steve Jobs"
  },
  {
    quote: "If life were predictable it would cease to be life, and be without flavor.",
    author: "Eleanor Roosevelt"
  },
  {
    quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough.",
    author: "Oprah Winfrey"
  },
  {
    quote: "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success.",
    author: "James Cameron"
  },
  {
    quote: "Life is what happens when you're busy making other plans.",
    author: "John Lennon"
  },
  {
    quote: "Spread love everywhere you go. Let no one ever come to you without leaving happier.",
    author: "Mother Teresa"
  },
  {
    quote: "When you reach the end of your rope, tie a knot in it and hang on.",
    author: "Franklin D. Roosevelt"
  },
  {
    quote: "It is during our darkest moments that we must focus to see the light.",
    author: "Aristotle"
  },
];
const colors = [
  "#ffdecf",
  "#d3dbff",
  "#8fcfd1",
  "#eeecda",
  "#383e56",
  "#89c9b8",
  "#cff6cf",
  "#726a95",
  "#abc2e8",
  "#303960"
];

const rand_num = Math.floor(Math.random()*quotes.length);

export const Quoter = () => {

  const [quote, setQuote] = useState(quotes[0].quote);
  const [author, setAuthor] = useState(quotes[0].author);
  const [color, setColor] = useState(colors[0]);


  const handleQuote = () => {
    return (
      setQuote(quotes[rand_num].quote),
      setAuthor(quotes[rand_num].author),
      setColor(colors[rand_num])
    )
  }


  return (
    <Container id="quote-box">
      <Row className="d-flex justify-content-center align-items-center">
        <Card>
          <Card.Body style={{width: "18rem"}}>
            <Card.Text id="text" style={{color: color}}>
              {quote}
              <Col>
                <p id='author'>-{author}</p>
              </Col>
            </Card.Text>
                <Button id='tweet-quote'><Card.Link href=""><FontAwesomeIcon icon={faTwitter}/></Card.Link></Button>
                <Button id='new-quote'
                        onClick={handleQuote}
                >
                  New Quote
                </Button>
          </Card.Body>
        </Card>
      </Row>
    </Container>
  )
}

Answer 1

Each time you have the same rand_num value inside your component.

You need to generate a new value each time and replace const by let.

const handleQuote = () => {
     rand_num = Math.floor(Math.random()*quotes.length);

    return (
      setQuote(quotes[rand_num].quote),
      setAuthor(quotes[rand_num].author),
      setColor(colors[rand_num])
    )
  }

Answer 2

As you are defining your constant rand_num outside of the main component Quoter , the logic is being executed only once, when your code runs for the first time. This, rand_num always carry the same value.

Moving the variable declaration into the scope of Quoter would solve the issue. The best approach would be to place your constant declaration inside handleQuote method. Also, as a suggestion and for keeping a clear consistency, you shouldn't use return on handleQuote, as you are not really returning any value with the method. The code still works fine with return, but it's just technically incorrect.

  const handleQuote = () => {
    const rand_num = Math.floor(Math.random()*quotes.length);

    setQuote(quotes[rand_num].quote);
    setAuthor(quotes[rand_num].author);
    setColor(colors[rand_num]);
  }

Note that it will generate a random value each time it is called and use the same rand_num value for each of the useState actions. If you want each one to have its individual random number, you should use the Math.floor logic individually on each one (maybe extracting it into another method).

  const getRandomNum= () => Math.floor(Math.random()*quotes.length);
  
  const handleQuote = () => {
    setQuote(quotes[getRandomNum()].quote);
    setAuthor(quotes[getRandomNum()].author);
    setColor(colors[getRandomNum()]);
  }