反應componentWillReceiveProps數據復制

Question

我在獲取一些數據時遇到了麻煩。 在componentWillReceiveProps我必須接收一個對象widgets ，但是我發現該對象widgets包含另一個對象widgets ，因此必須通過widgets.widgets訪問它。

期望值： widgets: { value1: 10, value2: 20, value3: 30 }

實際值： widgets: { widgets: { value1: 10, value2: 20, value3: 30 } }

我知道這樣做是可能的（但我認為這很丑）：

componentWillReceiveProps({ widgets }) {
  if (widgets !== this.props.widgets) {
    this.setState({ widgets: widgets.widgets });
  }
}

任何幫助將不勝感激！

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import * as widgetsActions from '../js/actions/widgetsActions';
import Dashboard from './dashboard/Dashboard';
import style from './App.scss';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      widgets: this.props.widgets,
    };
  }

  componentWillMount() {
    if (JSON.stringify(this.state.widgets) === JSON.stringify({})) {
      this.props.loadWidgets();
    }
  }

  componentWillReceiveProps({ widgets }) {
    if (widgets !== this.props.widgets) {
      this.setState({ widgets });
    }
  }

  render() {
    return (
      <div className={style.app}>
        {(JSON.stringify(this.state.widgets) !== JSON.stringify({})) &&
        <div>
          <Dashboard widgets={this.state.widgets} />
        </div>
        }
     </div>
    );
  }
}

App.propTypes = {
  loadWidgets: PropTypes.func.isRequired,
  widgets: PropTypes.shape({
    value1: PropTypes.number,
    value2: PropTypes.number,
    value3: PropTypes.number,
  }).isRequired,
};

const mapStateToProps = state => (
  {
    widgets: state.widgets,
  }
);

const mapDispatchToProps = dispatch => (
  {
    loadWidgets: () => dispatch(widgetsActions.loadWidgets()),
  }
);

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

我將猜測這是您的減速器設置存在的問題。 Redux docs的“ 結構化減速器-使用combineReducers部分描述了發生這種情況的幾個原因，通常是對combineReducers和slice減速器如何共同定義狀態結構的誤解。