Изменение состояния не передается дочернему компоненту в приложении React / Redux - PullRequest
Новая
       6

Изменение состояния не передается дочернему компоненту в приложении React / Redux

0 голосов
/ 18 октября 2018

Я испытываю странную проблему, когда изменение состояния в моем хранилище Redux достигает родительского компонента, но не передается в дочерний компонент представления.

Упрощенная версия кода выглядит так: 

class MyParentComponent extends Component {

   render() {
      return(
         <div>
             <MyChildComponent files={this.props.selectedFiles} />
         </div>
      );
   }
}

function mapStateToProps(state, ownProps) {
    debugger; // I see that state change reaches here!
    return {
        id: ownProps.id,
        id2: ownProps.id2,
        selectedFiles: state.files.selectedFiles
    }
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(myActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(MyParentComponent);

Обратите внимание на debugger, который я поместил внутри mapStateToProps.Я подтверждаю, что могу видеть изменение состояния, в котором у меня есть debugger, что означает, что все работает до этого момента, то есть создатель действий, хранилище редуксов и т. Д.

Я также подтвердил, что мой дочерний компонент действительно получаетего данные из state.files.selectedFiles.Я вручную поместил некоторые фиктивные данные в массив selectedFiles в моем редукторе files, и мой компонент отобразил их правильно.

Как я уже говорил, изменение состояния достигает родительского компонента, но не дочернего компонента.

Есть идеи, что здесь может происходить?

1 Ответ

0 голосов
/ 18 октября 2018

Я решил проблему.Вот что вызывало эту проблему:

Когда я обновлял свой массив selectedFiles, я использовал вспомогательную функцию, которая просто помещала новый файл в массив, т.е. selectedFiles.push(newFile);.

Looksкак будто это выполняло поверхностное копирование, а дочерний компонент не собирал его.

Я изменил вспомогательную функцию, чтобы она возвращала [...selectedFiles, newFile];, и все стало работать нормально.

...