MapStateToProps不叫componentWillRecieveProps

Question

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

我已经正确地完成了所有工作，直到可以在NavbarComponent中访问NavbarComponent中的const中的状态，但它不会重新呈现组件。我尝试过调用componentWillRecieveProps生命周期方法，但没有调用它。

SideNavbarComponent

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 };
};

导出默认连接(MapStateToProps)(SideNavComponent)；

减速器

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;
  }
};

动作

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

编辑

我在作为页面的4个组件中调用操作(linkChange)。其中一项建议如下：

DeviceComponent

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Col, Well } from 'react-bootstrap';
import axios from 'axios';
import _ from 'lodash';
import moment from 'moment';

import { linkChange } from '../../actions';

class DeviceComponent extends Component {
  state = {
    device: {}
  };

  componentDidMount() {
    axios.get(`http://localhost:3000/api/device/${this.props.match.params.id}`)
      .then(res => {
        this.setState({ device: res.data });
      })
      .catch(err => {
        console.log(err);
      });

    this.props.linkChange(2);
  }

  render() {
    const { device } = this.state;
    const battery = _.values(device.battery);
    const generator = _.values(device.generator);
    const Timestamp = moment(device.timestamp).format('dddd, MMMM Do YYYY, h:mm:ss a');

    return (
      <div>
        <Col md={7} sm={12}>
          <h3>Device ID: {device.id} ({device.location})</h3>
          <hr />
          <div style={{ marginTop: 40 }}>
            <Link className="btn btn-lg btn-success btn-block" to="/transform">Transformations</Link>
            <Link className="btn btn-lg btn-warning btn-block" to="/graph">Graphs</Link>
          </div>
          <div style={{ marginTop: 70 }}>
            <Link className="btn btn-lg btn-primary btn-block" to="/">Home</Link>
          </div>
        </Col>

        <Col md={5} sm={12}>
          <Well>
            <ul>
              <li>ID: {device.id}</li>
              <li>Location: {device.location}</li>
              <li>Timestamp: {Timestamp}</li>
              <li>
                Battery:
                <ul>
                  <li>Temperature: {battery[0]}</li>
                  <li>Current: {battery[1]}</li>
                  <li>Voltage: {battery[2]}</li>
                </ul>
              </li>
              <li>
                Generator:
                <ul>
                  <li>Temperature: {generator[0]}</li>
                  <li>Current: {generator[1]}</li>
                  <li>Voltage: {generator[2]}</li>
                </ul>
              </li>
            </ul>
          </Well>
        </Col>
      </div>
    );
  }
}

export default connect(null, { linkChange })(DeviceComponent);

Answer 1

key是一个保留的词，它将解决这个问题。