爲什麼我的地圖功能在更新的Redux狀態發生反應後不起作用

我正在顯示來自我的狀態存儲的項目列表。我想用一個onClick按鈕來更新這個列表。我的列表顯示了一個地圖功能，起初它運行良好，但是我點擊了按鈕我有以下錯誤data.map is not a function。當我運行我的組件而不顯示數據列表項時，一切正常，狀態更新正確。爲什麼我的地圖功能在更新的Redux狀態發生反應後不起作用

這裏是我的減速器用我的產品清單。

var all = [ 
    {x: 'a', y: 20}, 
    {x: 'b', y: 14}, 
    {x: 'c', y: 12}, 
    {x: 'd', y: 19}, 
    {x: 'e', y: 18}, 
    {x: 'f', y: 15}, 
    {x: 'g', y: 10}, 
    {x: 'h', y: 14} 
]; 

var filtered = [ 
    {x: 'a', y: 9}, 
    {x: 'b', y: 5}, 
    {x: 'c', y: 6}, 
    {x: 'd', y: 12}, 
    {x: 'e', y: 10}, 
]; 


const ChartData = (state = all, action) => { 
    switch (action.type) { 
    case 'DATA_CHART_ALL': 
     return { all: update(state.all, {$set: all})} 
    case 'DATA_CHART_FILTER': 
     return { all: update(state.filtered, {$set: filtered})} 
    default: 
     return state; 
    } 
};

，這裏是我的組件：

function DisplayData ({ data, DataSetUpdate }) { 
     return (
     <div> 
     <ul> 
      { data.map((m, i) => 
      <li key={i}>{m.x} - {m.y}</li> 
     )} 
     </ul> 
     <button onClick={DataSetUpdate}>dataSetupdate</button> 
     </div> 
    ); 
    } 

    const mapStateToProps = (state) => { 
     return { 
      data: state.ChartData 
     }; 
    }; 


    const mapDispachToProps = (dispatch) => { 
     return { 
      DataSetUpdate:() => {dispatch (datachartFilter())}, 
     }; 
    };

我想有一些錯誤的，我的組成部分。我想我需要使用類似this.props某處，但我不知道在哪裏。我也嘗試用構造函數方法構建ES6組件class DisplayData extends React.Component，但是我不知道如何傳遞我的DataSetUpdate函數。

這裏是JS斌https://jsbin.com/xocopal/edit?js,console,output

謝謝！

編輯＃1：我的JS bin不起作用，因爲我不能使不可變的庫工作：https://cdnjs.com/libraries/immutable所以我的reducer中的更新方法是未定義的。

來源

2016-08-05 Simon Breton

我們可以看到您發送數據和DataSetUpdate的組件/容器嗎？它應該是像 – blackmind

嗡嗡聲......你的意思是？ 'const AppChart = connect（mapStateToProps，mapDispachToProps）（DisplayData）; 導出默認AppChart' ...不想分享我所有的代碼...我認爲它不是很有用......或者是？ –

這是您唯一呼叫DisplayData的地方嗎？ – blackmind

減速應該只是改變基於輸入（總是一個新的狀態）如果你曾經轉播到API，你會做你的行動電話，然後將數據發送到減速的更新狀態

我認爲你需要更新你的減速機這使得簡單和清晰的解決方案

 const ChartData = (state = all, action) => { 
     switch (action.type) { 
      case 'DATA_CHART_ALL': 
      return action.data 
      case 'DATA_CHART_FILTER': 
       return action.data 
      default: 
      return state; 
     } 
     };

和你的行動

   function datachartAll() { 
       return { 
        type: 'DATA_CHART_ALL', 
        data: all 
       }; 
       } 

       function datachartFilter() { 
       return { 
        type: 'DATA_CHART_FILTER', 
        data: filtered 
       }; 
       }

請參閱https://jsbin.com/vobuduluni/1/edit?js,console,output

來源

2016-08-05 16:46:59 blackmind

好吧，只是爲了說清楚，如果這可能可以幫助某一天：首先，我不明白我的行爲必須與我的數據連接，而不是reducer。我也不明白我的行爲'payload'也在我的組件中定義！Thanks @blackmind –

爲什麼我的地圖功能在更新的Redux狀態發生反應後不起作用

回答

相關問題