У меня есть компонент без состояния, который имеет два реквизита реквизита: один реквизит состояния и один реквизит диспетчеризации.
Он отображает реквизит состояния и запускает реквизит диспетчеризации, что делает вызов API для заполнения пропеллер состояния.
const Component = ({ items, getItems }) => {
React.useEffect(() => {
getItems()
}, [])
return (
<div>
{items.map(item => <li>{item}</li>)}
</div>
)
}
При первом рендеринге компонента items пуста и отображается как пустая. Но я вижу, что действие завершается и обновляется магазин редуксов. Тем не менее, компонент не перерисовывается и остается пустым.
Однако, если я размонтирую компонент и перемонтирую его (в моем случае переходя на другой маршрут с использованием React Router), элементы будут обновлены и обработаны.
Разве компонент не должен перерисовываться, когда хранилище приставок обновляет реквизит предметов?
Редактировать: Я также добавил компонент контейнера. Я использую машинопись, если это имеет значение, которое, я полагаю, не имеет. А что касается рендеринга, я просто рендеринг компонента контейнера где-то
import { connect } from 'react-redux'
import Component from 'components/dashboard/item/Component'
import { getItems } from 'actions/item'
import { ItemByIdType, RootState } from 'types'
interface StateProps {
items: ItemByIdType
}
interface DispatchProps {
getItems: () => any,
}
interface OwnProps {}
export interface IComponent extends StateProps, DispatchProps, OwnProps {}
const mapStateToProps: (state: RootState) => StateProps = (state: RootState) => {
return {
items: state.item.byId
}
}
const mapDispatchToProps: (dispatch: any) => DispatchProps = (dispatch: any) => {
return {
getItems: () => dispatch(getItems()),
}
}
const ComponentContainer = connect<StateProps, DispatchProps, OwnProps>(
mapStateToProps,
mapDispatchToProps
)(Component)
export default ComponentContainer