反应 |如何显示数组中的随机字符串并在 btn press 上选择另一个随机字符串答案

【问题标题】：React | how to display random string from array and choose another random on btn press反应 |如何显示数组中的随机字符串并在 btn press 上选择另一个随机字符串
【发布时间】：2022-01-07 20:56:32
【问题描述】：

所以我正在学习 react 并想制作一个创意生成器，它可以从数组（“researchTitles”）文件中提取一个字符串，并将其显示在 h1 中，然后单击按钮，它会随机选择另一个并显示出来。到目前为止，我刚刚得到了大纲和随机选择字符串的方法，有没有更好的方法来做到这一点？如果可以的话，我能得到一些帮助

import researchTitles from './
import React from 'react';

function App() {

  const title = researchTitles[Math.floor(Math.random() * researchTitles.length)];
  
  return (
    <div className="App">
      <h1>{title}</h1>
      <button onClick={}>Generate</button>
    </div>
  );
}

export default App;

【问题讨论】：

提示：(1) 使用useState 获取和设置title，(2) 将研究标题的随机化抽象为一个函数，(3) 单击按钮时调用该函数，以及为title设置初始状态时

标签： javascript arrays reactjs string

【解决方案1】：

@Terry 准确地解释了它。这是一个真实的例子：

import React, { useState } from "react";

const researchTitles = [
  "AI",
  "Machine Learning",
  "Data Science",
  "Metaverse",
  "Crypto",
  "Tech"
];

const getRandomResearchTitle = () => {
  return researchTitles[Math.floor(Math.random() * researchTitles.length)];
};

function App() {
  const [researchTitle, setResearchTitle] = useState(getRandomResearchTitle());
  const handleClick = () => {
    // shuffle array and pick random
    const randomResearchTitle = getRandomResearchTitle();
    setResearchTitle(randomResearchTitle);
  };

  return (
    <div className="App">
      <h1>{researchTitle}</h1>
      <button onClick={handleClick}>Generate</button>
    </div>
  );
}

export default App;

【讨论】：

【解决方案2】：

你为什么不创建一个函数 generate() 来做这个词的选择？所以每次你点击按钮

<button onClick="generate()">Generate</button>

它会选择一些单词并在 h1 元素上返回它？

你可以在你的函数中使用 document.createElement()

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。