Question

我有一个react-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.graphdata变量的this.props.dnsCountPlot.x变量未更新。不知道这是否可行以及如何做到这一点？

   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

您应该将初始状态设置为拥有这些道具，然后使用private const Timespan c_maxTime = new Timespan(0, 0, 10); private static DateTime? s_lastValidEvent; private static object s_lockObject = new Object(); private static void QueueRequestChanged() { lock (s_lockObject) { if (!s_lastValidEvent.HasValue || (DateTime.Now - s_lastValidEvent.Value) > c_maxTime) { // Do whatever the event is supposed to trigger s_lastValidEvent = DateTime.Now; } } }生命周期方法更新状态componentWillReceiveProps，这将重绘组件。例如：

this.setState( {...} )

或者如果你想：

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

--- --- UPDATE

有人认为，最初用道具设置状态是React的反模式。它甚至在文档中都是这样说的......但是，如果你在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> }中完成对组件更新这些属性的更新状态时使用可接受的更新状态模式完成此反模式，则会停止为真。生命周期方法。

React-Redux访问组件内嵌套对象内的道具

1 个答案: