React Redux：连接到redux后组件未更新答案

【问题标题】：React Redux: Component not updated after connecting to reduxReact Redux：连接到redux后组件未更新
【发布时间】：2017-06-23 06:25:36
【问题描述】：

这个问题可能看起来多余，但我的组件在调用 mapStateToProps 后似乎没有更新。下面是我在 Home 组件（类声明之外的 ofc）中编写的一段代码。

function mapStateToProps(state) {
  const { tickets } = state;
  console.tron.log(tickets)
  if(!tickets.isLoading) {
    return {
      loading: false,
      ticketsModel: tickets.chunkedData
    }
  }
  return {
    loading: true
  }
}
export default connect(mapStateToProps)(Home);

一切正常，但对 props 的更改不会触发我的组件中的更新。

PS：我检查了是否发生了任何状态突变，但没有。我重新创建了一个新状态，例如

case RECEIVE_TICKETS :
      return Object.assign({},state,{
        isLoading: false,
        chunkedData: action.data.extractChunkedData(),
        completeData: action.data.getCompleteData(),
      });

编辑：问题已解决。愚蠢的我正在检查 componentWillMount 而不是 componentWillReceiveProps 中的更新

【问题讨论】：

您的 Home 组件中可能有问题？你能把那个贴出来吗？你是说如果你在render 中输入控制台日志，它不会在状态更改后触发？
可以分享你的组件代码吗？
@azium 完全正确。我还没有完成我的组件代码。但是当状态改变时，应该正确调用componentWillUpdate。这就是问题出现的地方。

标签： reactjs react-native redux react-redux redux-thunk

【解决方案1】：

您可以像这样更简洁地编写 mapStateToProps：

function mapStateToProps(state) {
  const { isLoading, chunkedData } = state.tickets;
  return {
    loading: isLoading,
    ticketsModel: chunkedData
  };
}
export default connect(mapStateToProps)(Home);

查看您的 mapStateToProps 函数和 Redux 记录器后，您的问题很可能出在组件本身。如果您要在组件中渲染this.props.loading，您应该看到true，然后是false。

另外，我发现您的 chunkedData 数组上没有初始状态。当您设置tickets 对象的初始状态时，您应该将其设置为一个空数组。

所以你的 reducer 的前几行应该是这样的：

const tickets = (
  state = {
    isLoading: false,
    chunkedData: [],
    // Need more info to know what would go in this object
    completeData: {} 
  },
  action
) => {

看看你是否可以看到componentWillReceiveProps生命周期方法中的props变化。你应该可以console.log() nextProps，只要道具发生变化，它就会发生变化。

在此处阅读有关生命周期方法的更多信息：http://busypeoples.github.io/post/react-component-lifecycle/

【讨论】：