reactjs - react Redux : Component not updated after connecting to redux

Question

这个问题可能看起来多余，但我的组件在调用 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);

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

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

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

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

Answer 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，只要 props 发生变化，它就会发生变化。

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