React状态变更不重渲染：实现图片数组洗牌渲染及点击触发

1. 解决首次挂载洗牌不生效的问题 #

你的代码存在两个核心问题导致首次挂载洗牌无效：

• 直接修改原数组引用：洗牌函数直接操作传入的Arr（导入的原始数组），数组是引用类型，修改后引用未变，setArr无法触发React重渲染。
• useEffect未设置空依赖数组：未指定依赖的useEffect会在每次组件渲染后执行，但因为数组引用未变，React不会更新视图；同时还会导致不必要的重复执行。

修改洗牌函数和useEffect #

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 shuffleArray = (array) => {
        const newArr = [...array]; // 创建数组副本
        for (let i = newArr.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            // 解构赋值交换元素，更简洁
            [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
        }
        return newArr;
    }

    // 空依赖数组确保仅在组件首次挂载时执行
    useEffect(() => {
        const shuffledArr = shuffleArray(Arr);
        setArr(shuffledArr);
    }, [])

    // ... 后续代码
}

2. 给图片元素添加点击洗牌事件 #

你之前把点击事件绑在容器上，现在需要给每个图片元素单独绑定点击逻辑：

情况1：arr中存储的是图片路径 #

如果Arr是图片URL数组，直接渲染img标签并绑定点击事件：

return (
    <MainContainer>
        {arr.map((imgUrl, index) => (
            <img
                key={index} // 建议使用图片唯一ID，无ID时用index兜底
                src={imgUrl}
                alt={`Gallery image ${index}`}
                onClick={() => {
                    const shuffled = shuffleArray(arr);
                    setArr(shuffled);
                }}
                style={{ cursor: 'pointer', width: '100%' }}
            />
        ))}
    </MainContainer>
)

情况2：arr中存储的是已有的JSX元素 #

如果Arr是预先定义的img或其他JSX元素，使用React.cloneElement给元素添加点击事件：

return (
    <MainContainer>
        {arr.map((element, index) => (
            React.cloneElement(element, {
                key: index,
                onClick: () => {
                    const shuffled = shuffleArray(arr);
                    setArr(shuffled);
                },
                style: { ...element.props.style, cursor: 'pointer' }
            })
        ))}
    </MainContainer>
)

关键总结 #

• 永远不要直接修改React状态中的数组/对象，必须返回新的引用才能触发重渲染
• useEffect的依赖数组要按需设置，空数组对应组件首次挂载的逻辑
• 点击事件需要绑定到具体的交互元素上，而非父容器（除非你需要容器内任意位置点击都触发）

内容的提问来源于stack exchange，提问作者Wase Zahin