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

我试图创建一个名称生成器组件，当用户单击按钮时，该组件将从数组中显示一个具有相应含义的名称。我使用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;

import React，{useState，useffect}来自“React”；
const GeneratorNew=（）=>{
const startingName=[{id:0，值：“更新名称！”}]；
常量名称列表=[
{id:1，名字：'Astghik'，意思是：'littlestar'}，
{id:2，名字：'Tagouhi'，意思是：'Queen'}，
{id:3，名字：'Lusine'，意思是：'Moon'}]
;
常量[stateOptions，setStateValues]=useState（startingName）；
//启动名称。推送（…名称列表）；
useffect（（）=>{
设置状态值（名称列表）；
}, []);
返回(
{nameList.name}
{nameList.means}

{stateOptions.map（（名称列表，索引）=>(
{nameList.value}
))}
);
};
导出默认生成器新建；

导入React，{useState，useffect}来自“React”；
const GeneratorNew=（）=>{
const startingName=[{id:0，值：“更新名称！”}]；
常量名称列表=[
{id:1，名字：'Astghik'，意思是：'littlestar'}，
{id:2，名字：'Tagouhi'，意思是：'Queen'}，
{id:3，名字：'Lusine'，意思是：'Moon'}]
;
常量[stateOptions，setStateValues]=useState（startingName）；
const handleOnClick=（）=>{
setStateValues（名称列表[Math.floor（Math.random（）*（nameList.length-1）））
}
返回(
{nameList.name}
{nameList.means}

handleOnClick（）}>
{stateOptions.map（（名称列表，索引）=>(
{nameList.value}
))}
);
};
导出默认生成器新建；

这里不需要

useffect

，而

useState

只有索引就足够了。 尝试类似于此片段的内容。在每次单击按钮时生成随机索引

const GeneratorNew=（）=>{
const startingName=[{id:0，意思是：“更新名称！”}]；
常量名称列表=[
{id:1，名字：'Astghik'，意思是：'littlestar'}，
{id:2，名字：'Tagouhi'，意思是：'Queen'}，
{id:3，名字：'Lusine'，意思是：'Moon'}]
;
常量[randomIndex，setRandomIndex]=React.useState（-1）；
常量数据=randomIndex！=-1？名称列表[randomIndex]：开始名称[0]；
返回(
{data.name}
{data.means}

setRandomIndex（Math.floor（Math.random（）*nameList.length））}>
随机
);
};
ReactDOM.render（，document.querySelector（'#app'））

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;