Javascript react组件将接收Props数据复制

我在获取数据方面遇到了一些麻烦。在

component将接收props

时，我必须接收一个对象

widgets

，但我发现对象

widgets

包含另一个对象

widgets

，我必须通过

widgets.widgets

访问它

预期值：

widgets:{value1:10，value2:20，value3:30}

实际值：

widgets:{widgets:{value1:10，value2:20，value3:30}

我知道这样做是可能的（但我认为这很难看）：

任何帮助都将不胜感激

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

从“React”导入React；
从“道具类型”导入道具类型；
从'react redux'导入{connect}；
从“../js/actions/widgetsActions”导入*作为widgetsActions；
从“./Dashboard/Dashboard”导入仪表板；
从“/App.scss”导入样式；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
widgets:this.props.widgets，
};
}
组件willmount（）{
if（JSON.stringify（this.state.widgets）==JSON.stringify（{}））{
this.props.loadWidgets（）；
}
}
componentWillReceiveProps（{widgets}）{
if（widgets！==this.props.widgets）{
this.setState（{widgets}）；
}
}
render（）{
返回(
{（JSON.stringify（this.state.widgets）！==JSON.stringify（{}））&&
}
);
}
}
App.propTypes={
loadWidgets:PropTypes.func.isRequired，
小部件：PropTypes.shape({
值1:PropTypes.number，
值2:PropTypes.number，
值3:PropTypes.number，
}).要求，
};
常量mapStateToProps=状态=>(
{
widgets:state.widgets，
}
);
const mapDispatchToProps=调度=>(
{
loadWidgets:（）=>dispatch（widgetsActions.loadWidgets（）），
}
);
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

我猜这是减速器设置的问题。Redux文档的这一部分描述了发生这种情况的两个原因，通常是对组合减速机和切片减速机如何协同工作来定义状态结构的误解。

是的，读过这篇文章后，我发现问题在于减速机返回函数中设置的名称。非常感谢。

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