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

Question

我是 React 的新手，我刚刚开始使用钩子，尤其是 useEffect:

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

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

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

请注意在第二段代码中，当我使用 React-redux reducers 调用 getAllCards() 到我的后端时，它会自动 returns 'cards' 数组作为有效负载，所以我的第二种方法工作完美，但它也会导致 'cards' 从头开始渲染。非常感谢任何有关如何规避此问题的帮助！

谢谢 :)

Answer 1

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

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

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

Updating a state array incrementally as opposed to entirely

reactjs

react-redux

react-hooks

react-state