为什么我的地图功能在使用 React 更新 Redux 状态后不起作用

Question

我正在显示我的国营商店的商品清单。我想用 onClick 按钮更新这个列表。我的列表显示有地图功能，起初它运行良好，但我单击按钮时出现以下错误 data.map is not a function。当我运行我的组件没有显示数据列表项时，一切正常，状态更新正确。

这是我的 reducer 和我的项目列表：

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 bin https://jsbin.com/xocopal/edit?js,console,output

谢谢！

编辑#1：我的 JS bin 不工作，因为我不能使不可变库工作：https://cdnjs.com/libraries/immutable 所以我的 reducer 中的更新方法未定义。

Answer 1

reducers 应该只根据输入改变状态（总是一个新状态）如果你曾经连接到 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

为什么我的地图功能在使用 React 更新 Redux 状态后不起作用

Why does my map function doesn't work after updated Redux state with react

redux

react-redux