未处理的拒绝（TypeError）：无法读取 redux 中未定义的属性“道具”

debugcn 发表于 Dev

夏尔马

我redux在我的应用程序中使用我尝试进行递增和递减。

/动作/index.js

export const INCREMENT = "SCORE_INCREMENT";
export const DECREMENT = "SCORE_DECREMENT";

const scoreAction = {
  increment() {
    return {
      type: INCREMENT
    };
  },

  decrement() {
    return {
      type: DECREMENT
    };
  }
};

export default scoreAction;

/reducers/index.js

import * as actions from "../actions";

const scoreReducer = (state = 0, action) => {
  switch (action.type) {
    case actions.INCREMENT:
      return state + 1;
    case actions.DECREMENT:
      return state - 1;
    default:
      break;
  }
};

export default scoreReducer;

索引.js

import { Provider } from "react-redux";
import { createStore } from "redux";
import scoreReducer from "./reducers";

let store = createStore(scoreReducer);

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

应用程序.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import RoundedButton from "./RoundedButton";
import { connect } from "react-redux";
import { scoreAction } from "./actions/index";
import * as actions from "./actions/index";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      score: 0
    };
    this.clickitem = this.clickitem.bind(this);
  }

  clickitem(user) {
    var url = "http://localhost:4000/generate-random";
    fetch(url)
      .then(function(response) {
        if (response.status >= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      })
      .then(function(data) {
        var computer = data.item;
        console.log("------------------------------------");
        console.log(user + computer);
        console.log("------------------------------------");
        if (
          (user === "Rock" && computer === "Scissors") ||
          (user === "Paper" && computer === "Rock") ||
          (user === "Scissors" && computer === "Paper")
        ) {
          console.log("------------------------------------");
          console.log("User won!!");
          console.log("------------------------------------");
          this.props.increment();
        } else if (user === computer) {
          console.log("------------------------------------");
          console.log("Tie");
          console.log("------------------------------------");
        } else {
          console.log("------------------------------------");
          console.log("Computer won!!");
          console.log("------------------------------------");
          this.props.decrement();
        }
      });
  }

  render() {
    const { store } = this.context;
    console.log("------------------------------------");
    console.log(store);
    console.log("------------------------------------");
    return (
      <div className="AppTitle">
        <b>Score:</b>
        <div>
          <RoundedButton text="Rock" clickitem={this.clickitem} />
          <RoundedButton text="Paper" clickitem={this.clickitem} />
          <RoundedButton text="Scissors" clickitem={this.clickitem} />
        </div>
      </div>
    );
  }
}

function mapStateToProp(state) {
  return { score: state };
}

export default connect(mapStateToProp, actions)(App);

我收到一个错误

Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
(anonymous function)
http://localhost:3000/static/js/bundle.js:18380:15
  18377 |       console.log("------------------------------------");
  18378 |       console.log("Computer won!!");
  18379 |       console.log("------------------------------------");
> 18380 |       this.props.decrement();
        |           ^  18381 |     }
  18382 |   });
  18383 | }
View source

谁能提示我我做错了什么？

维威克

如果可能，请将您的动作创建者功能更改为如下：-

export const INCREMENT = "SCORE_INCREMENT";
export const DECREMENT = "SCORE_DECREMENT";


  export function increment() {
    return {
      type: INCREMENT
    };
  }

  export function decrement() {
    return {
      type: DECREMENT
    };
  }

让我知道这个是否奏效。

同样在您的 clickItem 函数中，将其作为第一行：-