2016-06-13 57 views
3

我是相當新的反應,終極版,以及基於該複選框用戶點擊我建立動態更新圖的應用程序(從反應-chartjs)。 (見鏈接到下面的github回購!)作出反應,終極版和chart.js之道具不要重新呈現

我的問題是當是時候更新道具,其中包含圖表用來顯示信息的數據。這裏是做什麼的正確:

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內更新(圖表數據結構是深嵌套的,所以我使用react.addons.update()方法):reducer/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狀態被更新,反映出變化(經由終極版Devtools選中):

  • Redux DevTools Output

    我把組件內的ComponentWillRecieveProps和使用的console.log到檢查nextProps的內容,nextProps也顯示了更新的變化。元/ SpiderGraph.js:

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

    Console showing updated props

    然而,當我進入陣營devtool和挖應改變的道具,也沒有反映的變化,只是將舊數據:

    In the React devTool the props remain unchanged

    我已正確映射statetoprops函數與正確的數據(至少我認爲我有)。 app.js:

    function mapStateToProps(state) { 
    
        return { 
         charts: state.charts 
    
    
    } 
    

    }

    我找不出什麼我失蹤。

    鏈接到當前github上的項目可以發現At this link

    如果任何人都可以在它採取甘德,因爲我已經用完了什麼我可能是做錯了的想法。如果你對我有任何問題或疑慮,請不要猶豫,問!

    非常恭敬地 羅比

    回答

    2

    我認爲這不是終極版/反應propblem。 在控制檯中,您會看到這個錯誤:「無法讀取undefined - core.js的屬性'長度'」。 如果刪除'RadarChart'組件,然後在減速器中將參數「radar」更改爲「bar」。你會看到'BarChart'的作品。 或其他變體:您可以將「重繪」道具添加到「RadarChart」組件。

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

    相關問題