javascript - React Hooks : Shuffle array immediately on load, 和 onClick

Question

我有一个数组，我试图在初始加载和 onClick 时随机播放。我的功能似乎正在工作，但除非有页面重新渲染，否则我的功能不可见。
我试图解决的2个问题:

我想在初始加载时洗牌，但除非有重新渲染，否则不会发生洗牌。

我想在按钮按下时随机播放，但除非有重新渲染，否则不会发生随机播放。

这是我的CodeSandbox
谢谢

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

const myArray = [{
    name: "cat",
    count: 0
  },
  {
    name: "dog",
    count: 0
  },
  {
    name: "hamster",
    count: 0
  },
  {
    name: "lizard",
    count: 0
  }
];

function shuffle(arra1) {
  var ctr = arra1.length,
    temp,
    index;
  while (ctr > 0) {
    index = Math.floor(Math.random() * ctr);
    ctr--;
    temp = arra1[ctr];
    arra1[ctr] = arra1[index];
    arra1[index] = temp;
  }
  return arra1;
}

function App(props) {
  const [list, setList] = useState(myArray);
  useEffect(() => {
    const mountArray = shuffle(myArray);
    setList(mountArray);
  }, []);

  function handleShuffle() {
    const changes = shuffle([...list]);
    setList(changes);
    console.log("Shuffle", myArray, changes);
  }

  return ( 
  <div> 
    {list.map((x, index) => ( 
      <div key = {x.name + x.index}> 
        {x.name} - {x.count} 
        <button onClick={() => setList([...list], (x.count = x.count + 1))}>
        +
        </button> 
      </div>
    ))} 
    <button onClick={handleShuffle}>
      Shuffle 
    </button>
  </div>
  );
}

export default App;

Answer 1

HAI 我在 App.js 中做了一些更改

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

const myArray = [
  { name: "cat", count: 0 },
  { name: "dog", count: 0 },
  { name: "hamster", count: 0 },
  { name: "lizard", count: 0 }
];

function shuffle(arra1) {
  var ctr = arra1.length,
    temp,
    index;
  while (ctr > 0) {
    index = Math.floor(Math.random() * ctr);
    ctr--;
    temp = arra1[ctr];
    arra1[ctr] = arra1[index];
    arra1[index] = temp;
  }
  return arra1;
}

function App(props) {
  const [list, setList] = useState(myArray);
  useEffect(() => {
    const mountArray = shuffle(myArray);
    setList(mountArray);
  }, []);

  function handleShuffle() {
    const changes = shuffle([...list]);
    setList(changes);
    console.log("Shuffle", myArray);
  }

  return (
    <div>
      {list.map((x, index) => (
        <div key={x.name + x.index}>
          {x.name} - {x.count}
          <button onClick={() => setList([...list], (x.count = x.count + 1))}>
            +
          </button>
        </div>
      ))}
      <button onClick={handleShuffle}>Shuffle</button>
    </div>
  );
}

export default App;