不重新渲染状态更改 ReactJs

Question

在 arr.js 文件中，我有一些图像。我写了一个函数来洗牌数组中的元素。我想在首次安装组件以及单击图像时做出反应以渲染洗牌的图像。

这是我尝试过的：

import styled from "styled-components";
import React, {useState, useEffect} from "react";
import Arr from "../utils/arr";

const MainContainer = styled.div`
    display: grid;
    color: white;
    padding: 1rem;
    margin: auto;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
`

const Main = () => {
    const [arr, setArr] = useState(Arr)

    const shuffleArrayOnClick = (Arr) => {
        for (let i = Arr.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var tmp = Arr[i];
            Arr[i] = Arr[j];
            Arr[j] = tmp;
        }
        return Arr;
    }

    useEffect(() => {
        const shuffle = shuffleArrayOnClick(Arr);
        setArr(shuffle);
    })

    return (
        <MainContainer onClick={shuffleArrayOnClick}>
            {arr}
        </MainContainer>
    )
}

export default Main;

当没有设置依赖数组时，useEffect 在初始渲染之后立即运行。所以我希望在第一次安装组件时图像会被打乱。但是当我重新加载页面时，随机播放不起作用。相反，当我更改代码并保存它时，图像会被打乱并重新渲染。 另外我应该如何在数组元素上设置 onclick 函数？ 提前致谢。

Answer 1

永远不要直接修改反应状态

const shuffleArrayOnClick = (arr) => {
  const Arr = [...arr]
  for (let i = Arr.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var tmp = Arr[i];
      Arr[i] = Arr[j];
      Arr[j] = tmp;
    }
    return Arr;
}