Я не могу понять, в чем проблема.У меня есть компонент с именем DisplayItems, который получает некоторые данные из API (список элементов).
Я использую действия Redux и промежуточное программное обеспечение для получения элементов и данных из API.Я сохраняю предметы и другие данные в хранилище избыточных данных в виде массива объектов и называю его entriesData.Фактический массив в entriesData.data.Я использую connect для подключения состояния и действий к DisplayItems 'реквизитам.
Далее у меня есть дочерний компонент с именем GalleryItemContentV1.GalleryItemContentV1 не подключен к редуксу.Он просто получает данные из DisplayItems, который проходит через массив элементов и передает каждый из них в GalleryItemContentV1.Итак, снова, DisplayItems проходит через this.props.entriesData.data и передает каждый элемент в GalleryItemContentV1 в качестве реквизита, называемого entry.
Наконец, у меня есть дочерний компонент в GalleryItemContentV1, называемый TestCom.Вот где проблема.Я также передаю предмет, который я получил от DisplyItem до TestCom.Итак, поток данных DisplayItems (подключен)> GalleryItemContentV1 (не подключен)> TestCom (подключен).
TestCom подключен к редуксу.Для обновления элемента в entriesData.data используются некоторые действия из redux.Когда я обновляю this.props.entriesData.data в TestCom, GalleryItemContentV1 получает обновленные данные просто отлично, но TestCom ничего не получает.Элемент в TestCom никогда не обновляется.
Я понял, что проблема заключается в том, когда я подключаю TestCom к избыточному.Если TestCom не подключен к редуксу, он также получает обновленные реквизиты, как и GalleryItemContentV1.
Компоненты приведены ниже.Я попытался максимально упростить их.
DisplayItems
import React, {Component} from 'react';
import GalleryItemContentV1 from './GalleryItemContentV1';
import { connect } from 'react-redux';
import {getContestEntriesPageData} from '../../actions/contest';
class DisplayItems extends Component {
componentDidMount(){
this.props.getContestEntriesPageData(uri, search);
}
render(){
console.log('DisplayItems props', this.props);
return (
<div>
<div className="card-deck thumbnails" id="card-list">
{ this.props.entriesData.data instanceof Array ?
this.props.entriesData.data.map(function(object, i){
return <GalleryItemContentV1
entry={object} key={i}
arr_key={i}
/>;
}, this) : ''
}
</div>
</div>
)
}
}
const mapStateToProps = state => (
{
entriesData: state.entriesData,
}
)
const mapDispatchToProps = (dispatch) => {
return {
getContestEntriesPageData: (uri, search) => {
dispatch(getContestEntriesPageData(uri, search));
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(DisplayItems);
GalleryItemContentV1
import React, { Component } from 'react';
import TestCom from './TestCom';
class GalleryItemContentV1 extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<TestCom entry={this.props.entry} />
</div>
);
}
}
export default GalleryItemContentV1;
TestCom
Я выводлю результатыthis.props.entry.VotesCount (элемент из DisplayItems) в TestCom.Вот где возникает проблема.По какой-то причине, когда я подключаю TestCom к redux, его реквизиты не обновляются, но когда он отключен от Redux, то его реквизиты обновляются.
import React, {Component} from 'react';
import { connect } from 'react-redux';
class TestCom extends Component {
constructor(props) {
super(props);
}
render(){
console.log('TestCom props', this.props);
return (
<div>{this.props.entry.VotesCount}</div>
)
}
}
const mapStateToProps = state => (
{
user: state.user
}
)
export default connect(mapStateToProps)(TestCom);
Здесь я настраиваю redux,но я не думаю, что это важно знать, так как GalleryItemContentV1 видит обновленные данные просто отлично.
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import ContestReducer from '../reducers/contest';
export default function configureStore(initialState) {
return createStore(
ContestReducer,
initialState,
applyMiddleware(thunk)
);
}
Итак, подведем итог.
DisplayItems (подключен, получает обновленные данные из хранилища в порядке)> GalleryItemContentV1 (не подключен, получает обновления в порядке)> TestCom (подключен, не получает обновления, но получает обновления, если отключен)
Вот мой редуктор, на всякий случай, если он помогает.
import * as ContestActionTypes from '../actiontypes/contest';
const initialState = {
contest: null,
subscriptions: [],
user: null,
page: null
}
export default function Contest(state=initialState, action) {
console.log('redux action reducer: ', action)
switch(action.type) {
case ContestActionTypes.HANDLE_VOTE:
const newState = { ...state };
if (newState.entriesData) {
const index = newState.entriesData.data.findIndex(x => x.id === action.entry.id)
newState.entriesData.data[index].VotesCount = action.vote;
} else {
newState.entry.VotesCount = action.vote;
}
return newState
default:
return state;
}
}
Я также заметил, что то же самое происходит с GalleryItemContentV1.Если я подключу его, то он перестанет получать обновления от DisplayItems / хранилища резервов.Спасибо!