React Hooks：在加载和 onClick 时立即随机播放数组

Question

我有一个数组，我试图在初始加载和 onClick 时对其进行洗牌。我的功能似乎可以正常工作，但除非有页面重新呈现，否则不可见。

我正在尝试解决的 2 个问题：

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

谢谢

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

您的 setList 函数用于修改数组和 returns 一个新数组，其中包含打乱的值，因此您需要在非初始渲染时应用该函数。

 useEffect(() => {
    setList(shuffle(myArray))     
  }, []);

Answer 2

Html 仅当状态发生变化时才会发生变化，因此在组件内部创建一些状态，并在每次要更新 html.

时更新它

function App(props){
    const [myArray, setMyArray] = useState([])

    // rest of the code
}

Answer 3

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;

React Hooks：在加载和 onClick 时立即随机播放数组

React Hooks: Shuffle array immediately on load, and onClick

javascript

arrays

shuffle

reactjs

react-hooks