javascript - React-Redux 访问组件内嵌套对象内的 props

Question

我有一个react-redux应用程序，我能够在组件内接收 Prop 。

这是我的componentDidMount()函数

componentDidMount() {
        this.graphdata = {

            dnsCountPlot: {
                data: [{
                    type: 'scatter',  
                    x: this.props.dnsCountPlot.x,
                    y: this.props.dnsCountPlot.y,
                    fill: 'tozeroy',
                    marker: {
                        color: 'rgb(99, 128, 185)'
                    }
                }],
                layout: {
                    title: '',
                    xaxis: {
                        title: 'time'
                    },
                    autosize: true

                },
                config: {
                    showLink: false,
                    displayModeBar: true
                }
            }

        };
}

this.props.dnsCountPlot.x 变量每 10 秒更新一次，当我打印该变量时，它会显示这一点。

但是，包含 this.props.dnsCountPlot.x 变量的 this.graphdata 变量并未更新。知道这是否可行以及如何做到吗？

   componentDidUpdate() {

        console.log(this.props.dnsCountPlot.x); //Successfully Updated
        console.log(this.graphdata);            // Doesnt reflect changes of this.props.dnsCountPlot.x   

    }

index.js 文件

const initialState = {
    dnsCountPlot : {
        x: [],
        y: []
    }
};
const store = createStore(reducers(initialState));

const history = createBrowserHistory();

startSocket(store);

ReactDOM.render((
    <Provider store={store}>
        <HashRouter history={history}>
            <Switch>
                <Route path="/" name="Home" component={Full}/>
            </Switch>
        </HashRouter>
    </Provider>
), document.getElementById('root'));

谢谢。

Answer 1

您应该将初始状态设置为具有这些 Prop ，然后使用 componentWillReceiveProps 生命周期方法通过 this.setState( {...} ) 更新状态，其中将重绘组件。示例:

constructor( props ){
    super();
    this.state = { ...props };
}
componentWillReceiveProps( nextProps ){
    this.setState( { ...nextProps } );
}
render(){
   <span>this.state.dnsCountPlot.x</span>
}

或者如果你愿意:

constructor( props ){
    super();
    this.state = {
       graphData: {
         dnsCountPlot: {
            data: [{
                type: 'scatter',  
                x: this.props.dnsCountPlot.x,
                y: this.props.dnsCountPlot.y,
                fill: 'tozeroy',
                marker: {
                    color: 'rgb(99, 128, 185)'
                }
            }],
            layout: {
                title: '',
                xaxis: {
                    title: 'time'
                },
                autosize: true

            },
            config: {
                showLink: false,
                displayModeBar: true
            }
        }
      }
    };
}
componentWillReceiveProps( nextProps ){
    this.setState( { graphData: {
      ...this.state.graphData
      dnsCountPlot:{
        ...this.state.graphData.dnsCountPlot,
        data:[{
          ...this.state.graphData.dnsCountPlot.data[ 0 ],
          x: nextProps.dnsCountPlot.x,
          y: nextProps.dnsCountPlot.y,
        }] } } } );
}
render(){
   <span>this.state.graphData.dnsCountPlot.data[ 0 ].x</span>
}

---更新---

有人认为，最初使用 props 设置状态是 React 的反模式。甚至在文档中也是这么说的……但是，如果您使用可接受的更新状态模式来完成此反模式，那么当这些属性在组件上更新时，这将不再成立，如 componentWillReceiveProps< 中所做的那样 生命周期方法。