MapStateToProps 不调用 componentWillRecieveProps

Question

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

我已正确完成所有操作，直到我可以访问 NavbarComponent 中 mapsStateToProps const 中的状态但它不会重新渲染组件之前，它都可以正常工作。我曾尝试调用 componentWillRecieveProps 生命周期方法，但它没有被调用。

侧导航栏组件

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)。其中之一如下：

设备组件

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 是 React 中的保留字 - 重命名它将解决问题