为什么 React 在状态改变后不渲染？[功能组件]

Question

import React, {useState, useEffect} from 'react';

import MakeCard from './MakeCard.js';

export default function GameCards(props) {
  const [images, setImages] = useState([{}]);

  // Render component after fetching images
  useEffect(() => {
    getImages(props.cards).then(images => setImages(images));
  }, [props.cards]);

  // shuffle images and update state.
  const shuffleCards = (e) => {
    console.log("clicked");
    let newImages = images;
    for (let i = newImages.length - 1; i >= 0; i--) {
      let temp, j;
      j = Math.floor(Math.random() * i);
      temp = newImages[i];
      newImages[i] = images[j];
      newImages[j] = temp;
    }
    setImages(newImages);
    console.log("newImages: ", images);
  }

  if (images.length === 0) {
    return (<h1>Loading...</h1>)
  } else {
    return (<div>
      {
        images.map((image, i) => <MakeCard image={image} key={i}
          // shuffleCards={shuffleCards} 
        />)
      }
    </div>)
  }
}

所以我试图做出一个Memory_Card_Game反应，但是当我洗牌图像数组时（当用户单击图像时），这是一个状态变量。React 不渲染。我在文档中读到，当组件状态发生变化时，React 会更新虚拟 DOM 树。为什么图像数组更改后不渲染？

const [images, setImages] = useState([{}]);

Answer 1

您正在改变原始图像数组。

您设置 newImages = images （这只是一个引用而不是副本），然后更改 newImages 中的位置。

这有效地改变了原始数组，因此当 React 将传递给 setImages 的 newImages 与之前的图像进行比较时，它们是相同的数组，因此不会检测到任何变化。

你可以用以下方法修复它let newImages = [...images];