为什么在 state 更改后 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的反应，但是当我洗牌图像数组（当用户点击图像时）这是一个 state 变量。 React 不渲染。 我在文档中读到了当组件的 state 发生更改时会更新虚拟 DOM 树的文档。 为什么更改图像数组后不渲染？

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

Answer 1

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

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

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

你可以用let newImages = [...images];来修复它。

Answer 2

React 使用Object.is比较算法来检查 state 变量的变化，在这种情况下images是一个Array ，所以不要改变它的值，你应该每次都创建一个新的，例如：

const newImages = [...images]; // instead of "let newImages = images";

Answer 3

您的 newImages 数组基本上是相同的数组（相同的引用）。 尝试这个：

const shuffleCards = (e) => {
    console.log("clicked");
    const 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);
  }

这样我们就创建了图像数组的克隆。

Answer 4

由于您正在改变数组并使用相同的数组引用设置 state，因此 react 选择不重新渲染组件。 发生这种情况是因为 React 使用Object.is比较，同时检查是否需要在 setState 之后发生重新渲染。 这个想法是返回数组的新引用，而不是改变原始数组。 您可以通过使用扩展语法浅复制原始数组来使其工作

const shuffleCards = (e) => {
    console.log("clicked");
    // Shallow clone the array
    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);
  }