Question

我是React-Redux的新手，我正在构建一个应用程序，它根据用户点击的复选框动态更新图表（来自react-chartjs）。（请参阅以下链接到github repo！）

我的问题出现在需要更新道具的时候，道具包含图表用来显示信息的数据。这是正确的做法：

1.解雇一个动作： Home.js

self.pipeline = Gst.Pipeline()

self.udpsrc = Gst.ElementFactory.make('udpsrc', 'src')
self.pipeline.add(self.udpsrc)
self.udpsrc.set_property("socket", Gio.Socket().new_from_fd(self.videosocket.fileno()))

self.tsparse = Gst.ElementFactory.make("tsparse", None)
self.pipeline.add(self.tsparse)

self.demux = Gst.ElementFactory.make('tsdemux', None)
self.pipeline.add(self.demux)

self.queue = Gst.ElementFactory.make('queue', None)
self.pipeline.add(self.queue)

self.h264 = Gst.ElementFactory.make('avdec_h264', None)
self.pipeline.add(self.h264)

self.videoconvert = Gst.ElementFactory.make('videoconvert', None)
self.pipeline.add(self.videoconvert)

self.imagesink = Gst.ElementFactory.make('xvimagesink', None)
self.pipeline.add(self.imagesink)

self.udpsrc.link(self.tsparse)
self.tsparse.link(self.demux)
self.demux.link(self.queue)
self.queue.link(self.h264)
self.h264.link(self.videoconvert)
self.videoconvert.link(self.imagesink)

调用正确的reducer：

状态在reducer中更新（图表数据结构是深层嵌套的，所以我使用react.addons.update（）方法）：reducers / charts.js

GST_EVENT gstevent.c:709:gst_event_new_segment: creating segment event time segment start=0:00:00.000000000, stop=99:99:99.999999999, rate=1,000000, applied_rate=1,000000, flags=0x00, time=0:00:00.000000000, base=0:00:00.000000000, position 0:00:00.000000000, duration 99:99:99.999999999
0:00:06.241739369  5576      0x2f1c590 INFO                 basesrc gstbasesrc.c:2772:gst_base_src_loop:<src> marking pending DISCONT
0:00:06.241751688  5576      0x2f1c590 INFO        mpegtspacketizer mpegtspacketizer.c:770:mpegts_try_discover_packet_size: have packetsize detected: 188 bytes
0:00:06.241786466  5576      0x2f1c590 INFO              mpegtsbase mpegtsbase.c:726:mpegts_base_apply_pat:<mpegtsparse2-0> PAT
0:00:06.242321432  5576      0x2f1c590 INFO        GST_ELEMENT_PADS gstelement.c:897:gst_element_get_static_pad: found pad mpegtsparse2-0:sink
0:00:06.252539174  5576      0x2f1c590 INFO               GST_EVENT gstevent.c:628:gst_event_new_caps: creating caps event video/mpegts, systemstream=(boolean)true, packetsize=(int)188
0:00:06.252604078  5576      0x2f1c590 INFO               GST_EVENT gstevent.c:709:gst_event_new_segment: creating segment event time segment start=0:00:00.000000000, stop=99:99:99.999999999, rate=1,000000, applied_rate=1,000000, flags=0x00, time=0:00:00.000000000, base=0:00:00.000000000, position 0:00:00.000000000, duration 99:99:99.999999999
0:00:06.252655518  5576      0x2f1c590 INFO        mpegtspacketizer mpegtspacketizer.c:770:mpegts_try_discover_packet_size: have packetsize detected: 188 bytes
0:00:06.252693109  5576      0x2f1c590 INFO              mpegtsbase mpegtsbase.c:726:mpegts_base_apply_pat:<tsdemux0> PAT
0:00:06.252856437  5576      0x2f1c590 INFO        GST_ELEMENT_PADS gstelement.c:897:gst_element_get_static_pad: found pad tsdemux0:sink
0:00:06.252870522  5576      0x2f1c590 INFO               GST_EVENT gstevent.c:628:gst_event_new_caps: creating caps event audio/mpeg, mpegversion=(int)1
0:00:06.252894869  5576      0x2f1c590 WARN                 default descriptions.c:612:format_info_get_desc: Unexpected MPEG-1 layer in audio/mpeg, mpegversion=(int)1
0:00:06.252931277  5576      0x2f1c590 INFO        GST_ELEMENT_PADS gstelement.c:897:gst_element_get_static_pad: found pad tsdemux0:sink
0:00:06.252940534  5576      0x2f1c590 INFO               GST_EVENT gstevent.c:628:gst_event_new_caps: creating caps event video/x-h264, stream-format=(string)byte-stream, alignment=(string)nal
0:00:06.252997433  5576      0x2f1c590 INFO        GST_ELEMENT_PADS gstelement.c:646:gst_element_add_pad:<tsdemux0> adding pad 'audio_0041'
0:00:06.253006343  5576      0x2f1c590 INFO               GST_EVENT gstevent.c:709:gst_event_new_segment: creating segment event time segment start=0:00:00.000000000, stop=99:99:99.999999999, rate=1,000000, applied_rate=1,000000, flags=0x00, time=0:00:00.000000000, base=0:00:00.000000000, position 0:00:00.000000000, duration 99:99:99.999999999
0:00:06.253348125  5576      0x2f1c590 INFO        GST_ELEMENT_PADS gstelement.c:646:gst_element_add_pad:<tsdemux0> adding pad 'video_0040'
0:00:06.253394366  5576      0x2f1c590 INFO                 basesrc gstbasesrc.c:2785:gst_base_src_loop:<src> pausing after gst_pad_push() = not-linked
0:00:06.253408940  5576      0x2f1c590 WARN                 basesrc gstbasesrc.c:2865:gst_base_src_loop:<src> error: Internal data flow error.
0:00:06.253413835  5576      0x2f1c590 WARN                 basesrc gstbasesrc.c:2865:gst_base_src_loop:<src> error: streaming task paused, reason not-linked (-1)
0:00:06.253425400  5576      0x2f1c590 INFO        GST_ERROR_SYSTEM gstelement.c:1835:gst_element_message_full:<src> posting message: Internal data flow error.
0:00:06.253439614  5576      0x2f1c590 INFO        GST_ERROR_SYSTEM gstelement.c:1858:gst_element_message_full:<src> posted error message: Internal data flow error.
0:00:06.253513306  5576      0x2f1c590 INFO        GST_ELEMENT_PADS gstelement.c:766:gst_element_remove_pad:<tsdemux0> removing pad 'audio_0041'
0:00:06.253531993  5576      0x2f1c590 INFO        GST_ELEMENT_PADS gstelement.c:766:gst_element_remove_pad:<tsdemux0> removing pad 'video_0040'
('on_error():', (GError('Internal data flow error.',), 'gstbasesrc.c(2865): gst_base_src_loop (): /GstPipeline:pipeline0/GstUDPSrc:src:\nstreaming task paused, reason not-linked (-1)'))
0:00:06.253551147  5576      0x2f1c590 INFO                    task gsttask.c:300:gst_task_func:<src:src> Task going to paused

}

Redux状态已更新，反映了更改（通过Redux Devtools检查）：

我在我的组件中放置了一个ComponentWillRecieveProps并使用console.log来检查nextProps的内容，nextProps也显示了更新的更改。元素/ SpiderGraph.js：

<div class="checkbox">
                        <label>
                            <input type="checkbox" value="journal" onClick={this.props.updateRadar.bind(null, this.props.charts)}> Journals </input>
                        </label>
                    </div>

然而，当我进入React devtool并挖掘应该改变的道具时，没有反映的变化，只有旧的数据：

我已经正确地将statetoprops函数映射到正确的数据（至少我认为我有）。 app.js：

switch(action.type) {
        case 'UPDATE_RADAR' :
                var radardata = [0,0,0,0,0,0,0];
                var labels = ["January", "February", "March", "April", "May", "June", "July"]


            return  update(state, {
                radar: {
                    datasets: {
                        0: {
                            data: {$set: radardata }
                        }
                    }
                }
            })

        default:
            return state;

    }

}

我无法弄清楚我错过了什么。

可以找到当前github项目的链接At this link

如果有人可以采取行动，因为我已经用尽了我可能做错的想法。如果您对我有任何问题或疑虑，请不要犹豫！

非常恭敬罗比

Answer 1

我认为这不是redux / react propblem。在控制台中，你会看到这个错误：“无法读取未定义的属性'长度' - core.js”。如果删除'RadarChart'组件，然后在reducer中将参数“radar”更改为“bar”。你会看到'BarChart'有效。或者另一种变体：您可以在“RadarChart”组件中添加“重绘”道具。

link：https://github.com/jhudson8/react-chartjs/issues/80

React-Redux和Chart.js道具不要重新渲染

1 个答案: