React Hook中array push失效问题：colecao数组无法添加元素

核心问题分析 #

• colecao是组件内部的普通数组变量，每次组件重新渲染都会被重置为空数组，所以你push的内容根本留不住。
• setStickers是异步更新状态的，你调用setStickers(await Stickers.getDrop())后，立刻访问stickers拿到的还是旧值，不是刚获取的新数据。
• 初始count是0，第一次执行dropStickerSubmit时，循环条件i < count也就是i < 0，循环根本不会执行，自然没法push元素。

修复步骤 #

1. 把colecao改成useState状态变量，这样它的变更会触发组件重渲染，同时值会被React保留：

   const [colecao, setColecao] = useState<Sticker[]>([]);
   

2. 先存储异步获取的stickers数据，再更新状态，避免拿旧值：
   在dropStickerSubmit里，先把请求结果存在临时变量里，再用这个变量更新stickers和操作colecao。
3. 修正循环索引逻辑，第一次执行时应该取新获取的stickers的前4个元素，后续再根据count来处理。

修改后的完整代码片段 #

import * as C from './App.styles';
import * as Stickers from './services/stickers'
import { useState, useEffect } from 'react'
import { Sticker } from './types/Sticker'
import { StickerItem } from './components/StickerItem';

const App = () => {
  const [loading, setLoading] = useState(false);
  const [stickers, setStickers] = useState<Sticker[]>([]); 
  // 把colecao改成useState状态
  const [colecao, setColecao] = useState<Sticker[]>([]);
  const [count, setCount] = useState(0);
  const [seesticker, setSeesticker] = useState(false);

  const dropStickerSubmit = async () => {
    setLoading(true);
    // 先存请求到的新数据
    const newStickers = await Stickers.getDrop();
    setStickers(newStickers);
    const newCount = count + 4;
    setCount(newCount);
    // 从新数据里取对应范围的元素，更新colecao
    const newItems = newStickers.slice(count, newCount);
    setColecao(prev => [...prev, ...newItems]);
    setLoading(false);
  }

  const defineBoolean = () => {
    setSeesticker(true);
  }

  // ... 其他组件代码
}

额外说明 #

• 用setColecao(prev => [...prev, ...newItems])这种函数式更新的方式，可以确保拿到colecao的最新状态，避免因为异步更新导致的状态覆盖问题。
• 如果你的Stickers.getDrop()每次返回的是4个新贴纸，那直接用newStickers来追加到colecao里就行，不用依赖count，具体逻辑可以根据你的业务调整。

内容的提问来源于stack exchange，提问作者nicoborrges