Question

我正在显示我的国家商店的商品清单。我想用onClick按钮更新此列表。我的列表显示了一个map函数，起初效果很好但是我点击了按钮我得到了以下错误data.map is not a function。当我运行我的组件而不显示数据列表项时，一切正常，状态更新正确。

这是我的减速器，带有我的物品清单：

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

我猜我的组件有问题。我想我需要在某个地方使用像这样的东西。但是我不知道在哪里。我还尝试使用构造函数方法构建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中的update方法是未定义的。

Answer 1

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

请参阅https://jsbin.com/vobuduluni/1/edit?js,console,output

为什么我的map函数在使用react更新Redux状态后不起作用

1 个答案: