处理数组中的数据时出现问题，做出反应答案

【问题标题】：Problem with manipulating data in array, react处理数组中的数据时出现问题，做出反应
【发布时间】：2021-12-17 01:39:50
【问题描述】：

我使用number useParams 从 URL 路径中获取一个数字，并使用 deck 数组从 data 数组中获取数据，该数组包含 32 个具有 id 和 src（图像的 URL）属性的对象。

// Images.js

const data = [
    {
        id:1,
        src:'https://###.com/###',
    },
    //...

const Images = () => {
    const {number} = useParams()
    const [deck, setDeck] = useState(data);
    //...

然后我使用 useEffect 从 URL 路径中获取数字，并使用 setCards() 函数通过删除从 number 到 deck.length 的索引来根据 URL 中的给定数字显示适当数量的卡片。 shuffle() 函数在这里无关紧要，它只是按随机顺序放置对象。

// Images.js

useEffect(() => {
  fetch(`http://localhost:3000/play/${number}`).then(setCards(number));
}, [number]);

const setCards = (number) => {
  let tempDeck = deck;
  tempDeck.splice(number, deck.length);
  shuffle(tempDeck);
  setDeck(tempDeck);
};

我还使用这段代码通过路由到正确的 URL 路径从网页呈现适当数量的卡片：

// Home.js

<div className="btn-group">
  <Link to="/play/8">
    <button className="btn">8 cards</button>
  </Link>
  <Link to="/play/16">
    <button className="btn">16 cards</button>
  </Link>
  <Link to="/play/24">
    <button className="btn">24 cards</button>
  </Link>
  <Link to="/play/32">
    <button className="btn">32 cards</button>
  </Link>
</div>;

每当我进行初始渲染并选择“24 张卡片”按钮时，一切都很好，32 张卡片中有 24 张按原样显示，但是当我返回“主页”并选择更高的值时在这种情况下，“32 张卡片”按钮将显示 32 张卡片，浏览器将仅显示 24 张卡片而不是 32 张卡片。我该如何解决？

【问题讨论】：

在 setCards 函数中尝试 let tempDeck = [...deck]；
@FrancescoClementi funziona，感恩！
大杰！ scrivo una risposta più argomentata per gli altri così puoi accettarla

标签： javascript reactjs react-hooks use-effect use-state

【解决方案1】：

使用此代码：

let tempDeck = deck;
tempDeck.splice(number, deck.length);

您正在编辑原始数组。

您应该考虑创建原始数组的浅表副本并对其进行编辑：

let tempDeck = [...deck];
tempDeck.splice(number, deck.length);

【讨论】：