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

Question

我使用 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() 函数通过删除 URL 中的给定数字显示适当数量的卡片从 number 到 deck.length 的索引。 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>;

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

Answer 1

使用此代码：

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

您正在编辑原始数组。

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

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

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

Problem with manipulating data in array, react

javascript

reactjs

react-hooks

use-effect

use-state