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

【问题标题】：Display a random string from an array on the click of a button [React]单击按钮 [React] 显示数组中的随机字符串
【发布时间】：2020-04-02 00:31:19
【问题描述】：

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

我想显示一个不同的随机问题“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']

【问题讨论】：

添加另一个 useState, f.e. index，点击setIndex(randomValue)，呈现问题[index] ...没有人阅读文档？

标签： javascript reactjs react-hooks

【解决方案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>
  );
};

【讨论】：

【解决方案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;

【讨论】：