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

Question

我正在尝试制作一个名称生成器组件，该组件将在用户单击按钮时从数组中显示具有相应含义的名称。 我正在使用 useState 设置初始 state 以及随机循环遍历数组以及 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>