React状态更新后HTML未重新渲染问题求助

问题原因 #

你的shuffleArray函数直接修改了原数组（数组属于引用类型），React的useState通过引用变化判断是否需要重新渲染。由于排序操作没有生成新数组，setPictures(arr)传入的仍是原数组引用，React判定状态未发生变化，因此不会触发DOM更新。

另外，SelectCard里的async/await完全多余——setPictures并不返回Promise，无需await；且你在setPictures后直接console.log(pictures)，因setState是异步更新逻辑，打印的始终是旧状态，这会造成“状态没更新”的误导。

修复步骤 #

1. 修改洗牌函数，返回新数组 #

避免直接修改原数组，先创建原数组的浅拷贝再执行排序：

function shuffleArray(arr) {
  // 生成原数组的浅拷贝，切断与原数组的引用关联
  const newArr = [...arr];
  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;
}

2. 简化SelectCard函数 #

移除无用的async/await，优化状态更新逻辑：

function SelectCard(){
  const arr = shuffleArray(pictures);
  setPictures(arr);
}

3. 可选：监听状态变化（用于调试） #

若需确认状态是否更新，可添加useEffect监听：

useEffect(() => {
  console.log('更新后的pictures:', pictures);
}, [pictures]);

完整修复代码 #

import { useState, useEffect } from 'react';
import '../styles/main.css';
import HarryPotter from '../images/Harry-Potter.png';
import AlbusDumbledore from '../images/Albus-Dumbledore.jpg';
import BellatrixLestrange from '../images/Bellatrix-Lestrange.png';
import Boddy from '../images/Dobby.png';
import { v4 } from 'uuid';

function Main(){
    const arrPictures = [
        {
            id: 1,
            name: "Harry Potter",
            src: HarryPotter
        },
        {
            id: 2,
            name: "Albus Dumbledore",
            src: AlbusDumbledore,
        },
        {
            id: 3,
            name: "Bellatrix Lestrange",
            src: BellatrixLestrange,
        },
        {
            id: 4,
            name: "Boddy",
            src: Boddy,
        },
    ];
    const [score, setScore]=useState(0);
    const [highest, setHighest]=useState(0);
    const [pictures, setPictures]=useState(arrPictures);   
    
    function shuffleArray(arr) {
        const newArr = [...arr];
        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;
    }
    
    function SelectCard(){
        const arr = shuffleArray(pictures);
        setPictures(arr);
    }

    // 可选：监听状态变化用于调试
    useEffect(() => {
        console.log('当前pictures状态:', pictures);
    }, [pictures]);
    
    return (
        <main>
            <div id="score">
                <p>Current score: { score }</p>
                <p>Highest score: { highest }</p>
            </div>
            <div id="instructions">
                <p>Click to select a different card each round.</p>
            </div>
            <div id="cards">
                {pictures.map((picture) => (
                    <div className="card" key={ picture.id } onClick={ SelectCard }>
                        <img src={ picture.src } alt="Harry Potter character." />
                        <p>{ picture.name }</p>
                    </div>
                   ))}
            </div>
        </main>
    );
}

export default Main;

核心要点 #

• React状态更新依赖值/引用的变化：对于数组、对象这类引用类型，必须传入新的引用才能触发重新渲染。
• 禁止直接修改useState的状态值：直接操作原数组/对象会导致React无法检测到状态变更，进而不更新DOM。

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