为什么我的地图功能没有'；使用react更新Redux状态后无法工作

我正在显示状态存储中的项目列表。我想用onClick按钮更新这个列表。我的列表显示有一个映射函数，起初它工作得很好，但是我单击按钮时发现以下错误

data.map不是一个函数

。当我运行我的组件而不显示数据列表项时，一切正常，状态更新正确

这是我的减速机和我的项目列表：

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())},
        };
    };

函数DisplayData（{data，DataSetUpdate}）{
返回(

{data.map（（m，i）=>
{m.x}-{m.y}
)}

数据集更新
);
}
常量mapStateToProps=（状态）=>{
返回{
数据：state.ChartData
};
};
常量MapDispatchToprops=（调度）=>{
返回{
DataSetUpdate:（）=>{dispatch（datachartFilter（））}，
};
};

我想我的部件有问题。我想我需要用一些像这样的道具，但我不知道在哪里。我还尝试使用构造函数方法构建一个ES6组件

类DisplayData extensed React.component

，但我不知道如何传递DataSetUpdate函数

这是JS垃圾桶

谢谢

---

编辑#1：我的JS bin不工作，因为我无法使不可变库工作：因此我的reducer中的更新方法未定义。

reducer应根据输入更改状态（始终为新状态） 如果您曾经连接到一个API，您将在您的操作中进行调用，然后将数据发送到reducer进行更新

我想你只需要把你的减速器更新到 这使得解决方案更简单、更清洁

        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
                };
              }

---

请参见

我们是否可以查看发送数据和数据集更新的组件/容器？应该有点像哼哼。。。你是说这个吗<代码>常量AppChart=connect（MapStateTops，MapDispAchtops）（显示数据）；导出默认应用图表。。。不想共享我所有的代码。。。我认为这没用。。。或者是？这是唯一一个调用DisplayData的地方吗？不是，然后我在一个基本的应用程序组件中调用AppChart

const-App=（）=>（

。然后是我的client.js和商店提供商。但我认为这一部分没问题。你能把你的整个应用程序放在一个jsfiddle中让我看一下吗？好吧，我只是想说清楚，如果有一天这能帮到某人：首先，我不明白我的操作必须连接到我的数据，而不是减缩器。我也不明白这一点t我的动作“有效载荷”也在我的组件中定义！谢谢@blackmind