MapStateToProps不会调用componentWillRecieveProps

Question

我正在使用react-redux来管理3-4个组件之间的状态。我有4个组件作为页面，每当选择一个时，一个动作调用reducer来更新导航栏上的选定选项卡。很简单。

我已经完成了所有操作，它可以正常工作，直到我可以访问NavbarComponent中mapsStateToProps const中的状态，但它不会重新渲染Component。我试过调用componentWillRecieveProps生命周期方法，但它没有被调用。

SideNavbarComponent

Greeting

export default connect（mapStateToProps）（SideNavComponent）;

减速

import React, { Component } from 'react';
import { Nav, NavItem } from 'react-bootstrap';
import { connect } from 'react-redux';

class SideNavComponent extends Component {

  // Is not called
  componentWillReceiveProps(nextProps) {
    console.log(nextProps);
  }

  render() {
    // logs undefined
    console.log(this.props.key);
    return (
      <Nav bsStyle="pills" stacked activeKey={this.props.key}>
        <NavItem disabled eventKey={1}>Home</NavItem>
        <NavItem disabled eventKey={2}>Device</NavItem>
        <NavItem disabled eventKey={3}>Transformations</NavItem>
        <NavItem disabled eventKey={4}>Graphs</NavItem>
      </Nav>
    );
  }
}

const mapStateToProps = (state) => {
  const { key } = state.sideNav;

  // I can access via key here
  return { key };
};

动作

const INITIAL_STATE = {
  key: null
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'changed_link':
      return { ...state, key: action.payload };
    default:
      return state;
  }
};

修改

我在作为Pages的4个组件中的每个组件中调用操作（linkChange）。其中一个在下面：

DeviceComponent

export const linkChange = (key) => {
  return {
    type: 'changed_link',
    payload: key
  };
};

Answer 1

key是React中的保留字 - 重命名它将解决问题