时间戳

首页 > 解决方案 > React-Redux TypeError：无法读取未定义的属性“地图”

reactjs - React-Redux TypeError：无法读取未定义的属性“地图”

问题描述

当我按下递增或递减按钮时，我收到此消息。我认为所有步骤都可以，但我不明白为什么，当我按下按钮（+ 或 -）时，存储/状态设置为undefined；

src/App.js 

 import React, { Component } from "react";
    import Counter from "./components/counter";
    import { connect } from "react-redux";

    class App extends Component {
      render() {
        return (
          <div>
            {this.props.data.map(counter => (
              <Counter key={counter.id} id={counter.id} value={counter.value} />
            ))}
          </div>
        );
      }
    }

    const mapStateToProps = state => {
      return {
        data: state.data
      };
    };
    export default connect(mapStateToProps)(App);

src/components/counter.js

import React, { Component } from "react";
import { connect } from "react-redux";

class Counter extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.value}</h1>
        <button onClick={() => this.props.onIcrement(this.props.id)}>
          + UP
        </button>
        <button onClick={() => this.props.onDecrement(this.props.id)}>
          - DOWN
        </button>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onIcrement: id => dispatch({ type: "INCREMENT", key: id }),
    onDecrement: id => dispatch({ type: "DECREMENT", key: id })
  };
};

export default connect(
  null,
  mapDispatchToProps
)(Counter);

src/store/reducer.js

const initialState = {
  data: [{ id: 1, value: 4 }, { id: 2, value: 0 }]
};
const reducer = (state = initialState, action) => {
  const newState = { ...state };
  switch (action.type) {
    case "INCREMENT":
      return newState.data.map(el => {
        if (action.key === el.id) {
          return el.value++;
        }
        return el.value;
      });
    case "DECREMENT":
      return newState.data.map(el => {
        if (action.key === el.id) {
          return el.value--;
        }
        return el.value;
      });
    default:
      return newState;
  }
};
export default reducer;

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "./store/reducer";

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);


serviceWorker.unregister();

..................................................... .........................................

标签： reactjsredux

解决方案

在您的减速器中，您返回的是一个数组，而不是一个带有data数组键的对象。

以下代码应该可以工作。

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        data: state.data.map(el => { // <- return object with data instead of newState.data.map
          if (action.key === el.id) {
            return { ...el, value: el.value + 1};
          }
          return el;
        })
      };
    case "DECREMENT":
      return {
        data: state.data.map(el => { // <- same here too 
          if (action.key === el.id) {
            return { ...el, value: el.value - 1 };
          }
          return el;
        })
      };
    default:
      return state;
  }
};

推荐阅读