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

Question

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

我的问题是在更新道具时出现的，道具包含图表用来显示信息的数据。这是它正确执行的操作：

1.fires关闭一个动作： Home.js

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

正确的reducer叫做：

状态在 reducer 中更新（图表数据结构是深度嵌套的，所以我使用 react.addons.update() 方法）：reducers/charts.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;

    }

}

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

我在我的组件中放置了一个 ComponentWillRecieveProps 并使用 console.log 检查了 nextProps 的内容，nextProps 也显示了更新后的变化。 elements/SpiderGraph.js:

componentWillReceiveProps: function(nextProps) {
        console.log(nextProps);

    },

然而，当我进入 React devtool 并挖掘应该更改的 prop 时，没有反映出更改，只有旧数据：

我已经使用正确的数据正确映射了 statetoprops 函数（至少我认为我有）。 app.js:

function mapStateToProps(state) {

    return {
        charts: state.charts


}

}

我只是不知道我错过了什么。

一个link到当前github项目可以找到At this link

如果有人能看一看，因为我运行不知道我可能做错了什么。如果您对我有任何问题或疑虑，请随时提出！

非常恭敬罗比

Answer 1

我认为这不是 redux/react 问题。在控制台中，您可能会看到此错误： "Cannot read property 'length' of undefined - core.js" 。如果删除'RadarChart'组件，然后在reducer中将参数"radar"更改为"bar"。您会看到 'BarChart' 有效。或另一种变体：您可以将 "redraw" 属性添加到 'RadarChart' 组件。

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

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

React-Redux and Chart.js props Do not rerender

javascript

reactjs

chart.js

redux

react-redux