У меня проблемы с отображением индекса в значение ключа из моего состояния. Мое значение состояния для state.datalist
изначально устанавливается при загрузке componentA
. Я прошел через componentB
и вижу, что в моем state.datalist
изначально есть значения, заполненные списком моих предметов. Однако после того, как функция рендеринга завершится в componentB
, значение state.datalist.items
станет неопределенным. state.datalist.selected
все еще определено. Почему это? Мой редуктор не касается клавиши datalist.items
в моем состоянии.
Я в основном устанавливаю свое состояние, используя диспетчер в componentA
, который получает список элементов. Затем я отображаю этот список в componentA
. Когда ссылка нажата в componentA
, она выполняет диспетчеризацию, которая устанавливает идентификатор выбранного элемента в состоянии, а затем перенаправляет на componentB
, используя history.push(/componentB)
.
Когда компонент B изначально загружается, вот что находится в элементах:
[
0:{dataId:5, dataName: "Some text"},
1:{dataId:6, dataName: "Some more text"}
]
В компоненте A я щелкаю ссылку, которая выбирает элемент с dataId 5. Затем ему присваивается значение selected
в состоянии.
Код моего действия:
function setSelectedData(dataId) {
return dispatch => {
dispatch(request(dataId));
};
function request(dataId) { return { type: competitionConstants.SETSELECTED, dataId} }
}
Код моего редуктора:
import { constants } from '../_constants';
const initialState = {items: [], loading: false, selected: null}
export function datalist(state = initialState, action) {
switch (action.type) {
case dataConstants.SETSELECTED:
console.log("the action value in SETSELECTED: ", action)
return {
...state,
selected: action.dataId,
loading: false
};
default:
return state
}
}
В компоненте A у меня есть следующий обработчик для onClick.
handleLoadData(dataId) {
this.props.dispatch(dataActions.setSelectedCompetition(dataId));
history.push('/componentB')
}
В componentB у меня есть функция mapStateToProp, которую я передаю для подключения.
function mapStateToProps(state) {
const { selected, loading, items } = state.datalist;
return {
//myKey: items,
myKey: items[selected], //this is what I'm trying to get to work
isLoading: loading
};
}
export default connect(mapStateToProps)(Dashboard);