增量更新状态数组，而不是完全更新

Question

我是React的新手，我只是在使用钩子，尤其是useEffect:

```const Upload= ({  uploadedCard, cards}) => 
{useEffect(() => {
cards.push(uploadedCard);
}, [uploadedCard]); };```

基本上，每次axios api返回uploadedCard时，我都希望卡片状态将此新卡片添加到其中。注意，卡片是一个数组，因此我希望此数组添加新卡片，而不是一次加载所有卡片(我目前的方法是这样做的(：

useEffect(() => {
getAllCards();
}, [uploadedCard]);

请注意，在第二段代码中，当我使用React redux reducers将getAllCards((调用到后端时，它会自动返回"cards"数组作为有效负载，因此我的第二种方法非常有效，但它也会导致"card"从一开始就呈现。如有任何关于如何规避此问题的帮助，我们将不胜感激！

谢谢：(

Answer 1

您首先需要将卡存储在本地状态。然后，每当Upload组件接收到不同的uploadedCard时，就会运行useEffect，并将其添加到卡片阵列中

const Upload= ({ uploadedCard, cards }) => {
const [ allCards, setAllCards ] = useState(cards);
useEffect(() => {
setAllCards([ ...cards, uploadedCard]);
}, [ uploadedCard ]); 
};