Question

我遇到一个奇怪的问题，我的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所在的位置看到状态变化，这意味着一切都可以正常进行，例如动作创建者，redux存储等。

我还确认我的孩子部分确实从state.files.selectedFiles获取其数据。我在selectedFiles精简器的files数组中手动放置了一些伪数据，我的组件正确显示了它们。

正如我提到的，状态更改将到达父组件，而不是子组件。

你知道这里可能发生什么吗？

Answer 1

我解决了这个问题。这是导致此问题的原因：

在更新selectedFiles数组时，我正在使用一个辅助函数，该函数只是将新文件即selectedFiles.push(newFile);推入数组。

看起来这是在执行浅表复制，而子组件未在拾取它。

我将helper函数更改为返回[...selectedFiles, newFile];，一切开始正常运行。

状态更改未推送到React / Redux应用程序的子组件

1 个答案: