如何在每次点击时将反应钩子状态传递给另一个组件

Question

我坚持在这一刻创建具有不同产品的商店，我想将其添加到购物篮中。当我想将 cardList 的状态传递到购物篮组件中以将信息从"购物篮为空"更改为显示篮子中当前有多少项目的信息时，就会出现问题。

下面我将我的主要钩子组件与包含所有功能的篮子组件粘贴。

篮子组件：

import React from 'react'
const Basket = (props) => {
return (
<div>
{props.cardItems.length === 0 ? "Basket is empty" : <div> You have {props.cardItems.length} products in basket!</div>}
</div>
)
}
export default Basket;

主要成分：

function 
const [cardItems, setCardItems] = useState([]);
const price = 2.50;
useEffect(() => {
fetch(URL, {
method: 'GET',
headers: {
Accept: "application/json",
}
}).then(res => res.json())
.then(json => (setBeers(json), setFilteredBeers(json))
);
}, [])

function handleMatches(toMatch) {...
}
const displayFilterBeers = event => {...
}
const handleRemoveCard = () => {...
}
const handleAddToBasket = (event, beer) => {
setCardItems(state => {
let beerAlreadyInBasket = false;
cardItems.forEach(item => {
if (item.id === beer.id) {
beerAlreadyInBasket = true;
item.count++;
};
});
if (!beerAlreadyInBasket) {
cardItems.push({ ...beer, count: 1 })
}
localStorage.setItem('baketItems', JSON.stringify(cardItems));
console.log('cardItems: ', cardItems, cardItems.length);
return cardItems;
})
}
return (
<div className="App">
<div className='search'>
<input type='text' placeholder='search beer...' onChange={displayFilterBeers} />
</div>
<BeerList BeersList={filteredBeers} price={price} handleAddToBasket={handleAddToBasket} />
<Basket cardItems={cardItems}/>
</div>
);
}
export default App;

我看到一个例子，如果没有 React 钩子，在篮子组件中有人使用 const {cartItems} = this.props; 但我不知道如何使用钩子实现类似的东西。

Answer 1

我认为您面临的与此问题有关。

因此，在将数组或列表处理为状态时，如果您没有将状态值设置为新实例，则 react 不会重新渲染。它从高级比较中假定状态尚未更改。因此，它从重新渲染中解救出来。

从我发现这个问题上，这个解决方案比其他解决方案更好 -

const handleAddToBasket = (event, beer) => {
const nextState = [...cardItems, beer] // this will create a new array, thus will ensure a re-render
// do other stuffs
setCardItems(nextState);
};