陣營-Redux的訪問道具嵌套對象內部部件

Question

內我有一個反應-Redux的應用，我能夠接收部件內部的道具。

這是我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

您應該將您的初始狀態設置爲具有這些道具，然後使用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> 
} 

--- UPDATE ---

有人認爲，與最初的道具設置狀態是一種反模式反應。而且它甚至在文檔中都這樣說...但是，如果您在組件上更新這些屬性時使用可接受的更新狀態來完成此反模式，則這種情況就會停止，如componentWillReceiveProps生命週期方法中所做的那樣。