我正在做一个项目，每次单击SelectCard函数时，我都必须显示卡片并重新排序它们。问题是，在单击该函数并且setPictures方法成功更新pictures变量后，HTML不会呈现新值。
我已经尝试在每次对pictures重新排序时创建不同的ID，但仍然得到相同的结果。
下面是我的代码：

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(){
    var 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) {
        for (let i = arr.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [arr[i], arr[j]] = [arr[j], arr[i]];
        }
        return arr;
    }
    async function SelectCard(){
        const arr = shuffleArray(pictures);
        await setPictures(arr);
        console.log(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."></img>
                        <p>{ picture.name }</p>
                    </div>
                   ))}
            </div>
        </main>
    );
}

export default Main;