如何使用 array.map、useState、useEffect 在 React 中使用 onClick 随机显示项目？

Question

我正在尝试制作一个名称生成器组件，当用户单击一个按钮时，该组件将显示一个名称及其来自数组的相应含义。我正在使用 useState 来设置初始状态以及随机循环数组，以及 useEffect （尽管不确定是否有必要）。我更愿意使用 array.map() 方法进行随机化。组件代码如下：

import React, { useState, useEffect } from "react";

const GeneratorNew = () => {
  const startingName = [{ id: 0, value: "Update Name!" }];

  const nameList = [
      { id: 1, name: 'Astghik', meaning: 'little star' }, 
      { id: 2, name: 'Tagouhi', meaning: 'Queen' }, 
      { id: 3, name: 'Lusine', meaning: 'Moon' }]
  ;

  const [stateOptions, setStateValues] = useState(startingName);
  // startingName.push(...nameList);

  useEffect(() => {
    setStateValues(nameList);
  }, []);

  return (
    <div>
      <h1>{nameList.name}</h1>
      <p>{nameList.meaning}</p>
      <button>
        {stateOptions.map((nameList, index) => (
          <option key={nameList.id}>{nameList.value}</option>
        ))}
      </button>
    </div>
  );
};

export default GeneratorNew;

Answer 1

import React, { useState, useEffect } from "react";

const GeneratorNew = () => {
  const startingName = [{ id: 0, value: "Update Name!" }];

  const nameList = [
      { id: 1, name: 'Astghik', meaning: 'little star' }, 
      { id: 2, name: 'Tagouhi', meaning: 'Queen' }, 
      { id: 3, name: 'Lusine', meaning: 'Moon' }]
  ;

  const [stateOptions, setStateValues] = useState(startingName);


  const handleOnClick = () => {
     setStateValues(nameList[Math.floor(Math.random() * (nameList.length - 1))])
  }

  return (
    <div>
      <h1>{nameList.name}</h1>
      <p>{nameList.meaning}</p>
      <button onClick={() => handleOnClick()}>
        {stateOptions.map((nameList, index) => (
          <option key={nameList.id}>{nameList.value}</option>
        ))}
      </button>
    </div>
  );
};

export default GeneratorNew;

Answer 2

这里不用useEffect，useState只要有索引就够了。尝试像这样的片段。在每次单击按钮时生成随机索引。

const GeneratorNew = () => {
  const startingName = [{ id: 0, meaning: "Update Name!" }];

  const nameList = [
      { id: 1, name: 'Astghik', meaning: 'little star' }, 
      { id: 2, name: 'Tagouhi', meaning: 'Queen' }, 
      { id: 3, name: 'Lusine', meaning: 'Moon' }]
  ;

  const [randomIndex, setRandomIndex] = React.useState(-1);

  const data = randomIndex !== -1 ? nameList[randomIndex] : startingName[0];

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.meaning}</p>
      <button onClick={() => setRandomIndex(Math.floor(Math.random() * nameList.length))}>
        Get Random 
      </button>
    </div>
  );
};

ReactDOM.render(<GeneratorNew /> , document.querySelector('#app'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="app"> </div>

如何使用 array.map、useState、useEffect 在 React 中使用 onClick 随机显示项目？

How to display items in React using array.map, useState, useEffect at random with onClick?

javascript

arrays

reactjs

use-state