React Redux：连接的子组件不接收道具

Question

最后，在GalleryItemContentv1中有一个子组件，名为TestCOM。这就是问题所在。我还将从DisplyItem获得的项传递到Testcom。因此，数据流是DisplayItems（连接）>GalleryItemContentv1（未连接）>TestCOM（连接）。

Testcom连接到Redux。它使用redux中的一些操作来更新entriesdata.data中的项。当我在Testcom中更新this.props.entriesdata.data时，GalleryItemContentv1可以很好地接收更新后的数据，但是Testcom却什么都接收不到。Testcom中的项从未更新。

我发现问题出在将Testcom连接到Redux时。如果Testcom没有连接到redux，它也会接收更新的道具，就像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

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);

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)
  );
}

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/redux商店的更新。

任何投入都是赞赏的。谢了！

Answer 1

你在改变你的状态。您在切片简化器中创建了顶级状态的浅层副本，但并没有创建内部所有嵌套级别的副本。然后，连接的组件提取state.entriesdata，引用没有改变。因此，connect包装组件认为状态根本没有改变，并且不会重新呈现您自己的组件。

Redux docs页面“不可变的更新模式”特别指出这是一个常见的错误。

如果不可更改地更新嵌套状态太麻烦了，我建议查看immer不可更改更新库。此外，我们新的redux-starter-kit包在内部使用Immer来编写更简单的简化程序。

另外，请参阅我的文章《惯用Redux：React-Redux的历史和实现》以了解背景和Connect如何在内部工作的详细信息。