React Custom Roulette 如何显示轮盘号码

Question

问题是轮盘停止时显示号码。

const data = [
  { id: 1, option: 10 },
  { id: 2, option: -30 },
  { id: 3, option: 50 },
  { id: 4, option: 30 },
  { id: 5, option: 40 },
  { id: 6, option: 20 }
];

export default () => {
  const [mustSpin, setMustSpin] = useState(false);
  const [prizeNumber, setPrizeNumber] = useState(0);

  const handleSpinClick = () => {
    const newPrizeNumber = Math.floor(Math.random() * data.length);
    setPrizeNumber(newPrizeNumber);
    setMustSpin(true);
  };

  return (
    <>
      <div align="center">
        <h1 align="center">Roulette Game</h1>
        <hr />
        <Wheel
          mustStartSpinning={mustSpin}
          prizeNumber={prizeNumber}
          data={data}
          outerBorderColor={["#f2f2f2"]}
          outerBorderWidth={[25]}
          innerBorderColor={["#f2f2f2"]}
          radiusLineColor={["#dedede"]}
          radiusLineWidth={[10]}
          textColors={["#ffffff"]}
          fontSize={[50]}
          perpendicularText={[true]}
          backgroundColors={[
            "#F22B35",
            "#F99533",
            "#24CA69",
            "#514E50",
            "#46AEFF",
            "#9145B7"
          ]}
          onStopSpinning={() => {
            setMustSpin(false);
          }}
        />
        <button className="button2" onClick={handleSpinClick}>
          SPIN
        </button>
        <br />
        {data.option}
        <hr />
      </div>

我在上面输入了这段代码，但它显示了常量数据数组 id = [{ id: 1, option: 10 },{ id: 2, option: -30 },{ id: 3, option: 50 } ,{ id: 4 , option: 30 },{ id: 5, option: 40 },{ id: 6, option: 20 } ];

我尝试了这个但是失败了

{data.option}

Answer 1

data 是一个数组，所以它可能不会有 option 属性.

似乎 prizeNumber 是伪随机索引，因此要显示选项，请从 data 数组访问它。

{data[prizeNumber].option}

Answer 2

您正在查找数组中的对象属性。试试这个：

onStopSpinning={() => {
    setMustSpin(false);
    alert(data[prizeNumber].option)
}}

React Custom Roulette 如何显示轮盘号码

React Custom Roulette how to show the roulette number

arrays

reactjs

react-hooks

react-component

react-functional-component