单击按钮显示数组中的随机字符串 [React]

Question

我正在尝试构建一个显示随机问题的简单应用程序。 我可以在装载和页面刷新时成功显示数组中的随机字符串。

我想显示一个按钮的不同随机问题“onClick”而不是刷新页面？

到目前为止的代码如下：

export const QuestionContainer = () => {
  const [response, setResponse] = useState({});

  useEffect(() => {
    fetchData().then(res => setResponse(res));
  }, []);

  const { records = [] } = response;

  const questions = records.map(record => record.fields.question);

  console.table(questions);

 // const randomNum = arr => {
 //   return Math.floor(Math.random() * arr.length);
 //  };

  return (
    <div className='questions-container'>
      <h1>{questions[0]}?</h1>
      <button onClick={() => console.log('more')}>More</button>
    </div>
  );
};

const questions是一个字符串数组示例 - ['hello', 'world', 'noob question']

Answer 1

你非常接近！ 只需使用 onClick 设置正在显示的索引，您就大功告成了！ 这应该有效：

const randomIndex = (arr) => { // returns a random int value to use as an index
    return Math.floor(Math.random() * arr.length)
}
export const QuestionContainer = () => {
  const [response, setResponse] = useState({});
  const [index, setIndex] = useState(0) // 0 initially, as you had in your example

  useEffect(() => {
    fetchData().then(res => setResponse(res));
  }, []);

  const { records = [] } = response;

  const questions = records.map(record => record.fields.question);

  console.table(questions);

  return (
    <div className='questions-container'>
      <h1>{questions[index]}?</h1>
      <button onClick={_ => setIndex(randomIndex(questions)}>More</button>
    </div>
  );
};

Answer 2

如果您使用另一个带有按钮的 API 随机报价：

 
import './App.css';
import axios from 'axios';
import { useEffect, useState } from 'react';

const App = () => {
  const randomIndex = (arr) => { // returns a random int value to use as an index
    return Math.floor(Math.random() * arr.length)
  }

  const [quote, setQuote] = useState("");
  const [index, setIndex] = useState(0);

  const quoteAPI = async () => {
    let arrayOfQuotes = [];

try {
      const data = await axios.get("https://raw.githubusercontent.com/skolakoda/programming-quotes-api/master/backup/quotes.json");
      arrayOfQuotes = data.data;
      console.log(arrayOfQuotes);
      const quote = arrayOfQuotes.map((arrayOfQuote) =>
        <div key={arrayOfQuote.id}>
          <h3>{arrayOfQuote.en}</h3>
          <p>{arrayOfQuote.author}</p>

        </div>);
      console.log(quote);
      setQuote(quote);
    } catch (error) {
      console.log(error);
    }

  };

  useEffect(() => {
    quoteAPI();
  }, []);

  return (<div className="App">
    <h4>{quote[index]}</h4>
    <button onClick={_ => setIndex(randomIndex(quote))}>Get Random Quote</button>
  </div>
  );
};

export default App;