react componentWillReceivePropsデータ複製

Question

データを取得する際に問題が発生します。 componentWillReceivePropsでオブジェクトwidgetsを受け取る必要がありますが、オブジェクトwidgetsに別のオブジェクトwidgetsが含まれており、widgets.widgetsでアクセスする必要があると認識しました。

期待値：widgets: { value1: 10, value2: 20, value3: 30 }

実際の値：任意の助けが理解されるであろう

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

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

Answer 1

私はそれがあなたのレデューサーセットアップに問題であると推測します。 ReduxドキュメントのStructuring Reducers - Using combineReducersセクションには、これが起こることができる2つの理由が説明されています。通常は、combineReducersとスライス縮小部がどのように連携して状態構造を定義するのかについて誤解されています。