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

Question

I'm trying to make a name generator component that will display a name with its corresponding meaning from an array when the user clicks a button. I'm using useState to set the initial state as well as to cycle through the array randomly, as well as useEffect (although not sure if its necessary). I would prefer to use the array.map() method for randomizing. Component code below:

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

No need to useEffect here and useState only having the index is enough. Try something like this snippet. Generate the random index on each button click.

 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>