Question

我对React还是很陌生，我只是想使用钩子，尤其是useEffect：

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

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

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

在第二段代码中，请注意，当我使用React-redux reducers调用getAllCards（）到后端时，它会自动将'cards'数组作为有效载荷返回，因此我的第二种方法可以正常工作，但也会导致'卡片从一开始就呈现。非常感谢您提供有关如何解决此问题的帮助！

谢谢:)

Answer 1

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

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

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

1 个答案: