React组件在状态改变时不重新渲染

Question

我正在调度一个对象到一个数组，我得到一个信息，它已成功发送，但这个数组的长度在我的头组件中没有改变。有

store.getState().Basket.length

不重新呈现。这个值只有在我改变路径时才会重新渲染。

这是头组件:

function Header() {
return (
<div id="Header">
<Link to='/' style={{ display: 'flex',textDecoration: 'none', color: '#000' }}>
<div className='Header_Pole'>
<img src={logo} alt='Logo' className='Header_Pole_img'/>   
</div>
</Link>
<Link to='/basket' style={{ display: 'flex',textDecoration: 'none', color: '#000' }}>
<div className='Header_Pole'>
<img src={shoppingBasketIcon} alt='Basket' className='Header_Pole_img'/> 
<p className='itemsCounter'>{ store.getState().Basket.length }</p>
</div>
</Link>
</div>
)
}
export default Header;

存储:

export const store = configureStore({
reducer: {
Basket: basketReducer
}
})

的分派函数:

const addToBasket = () => {
dispatch({
type: addtoBASKET,
item: {
id: Products[idOfProduct - 1].id,
name:Products[idOfProduct - 1].name,
type: Products[idOfProduct - 1].type,
image: Products[idOfProduct - 1].image,
price:Products[idOfProduct - 1].price,
size: gettingSize() // return a size
}
})
}

我试着在网上找一些东西，但是什么也找不到。

Answer 1

你应该使用钩子useSelector从react-redux
useSelector将通知你的组件当redux状态改变和更新你的组件

import { useSelector } from 'react-redux'
function Header() {
const basketLength = useSelector((state)=>state.Basket.length)
return (
<div id="Header">
// [...]
<p className='itemsCounter'>{basketLength}</p>
</div>
)
}
export default Header;

Answer 2

您必须使用react-redux来处理反应中的还原状态。否则，您必须手动实现两者之间的状态同步。