未处理的拒绝(TypeError):无法读取 redux 中未定义的属性“道具" [英] Unhandled Rejection (TypeError): Cannot read property 'props' of undefined in redux

问题描述

我在我的应用程序中使用 redux，我试图在其中进行递增和递减.

/actions/index.js

export const INCREMENT = "SCORE_INCREMENT";export const DECREMENT = "SCORE_DECREMENT";const scoreAction = {增量() {返回 {类型:增量};},递减(){返回 {类型:递减};}};导出默认分数动作；

/reducers/index.js

import * as actions from "../actions";const scoreReducer = (state = 0, action) =>{开关(动作.类型){案例操作.增量:返回状态 + 1；案例行动.减少:返回状态 - 1;默认:休息;}};导出默认 scoreReducer；

index.js

import { Provider } from "react-redux";import { createStore } from "redux";从./reducers"导入scoreReducer；让 store = createStore(scoreReducer);ReactDOM.render(<Provider store={store}><App/></Provider>,document.getElementById("root"));

App.js

import React, { Component } from "react";从./logo.svg"导入标志；导入./App.css"；从./RoundedButton"导入圆形按钮；从react-redux"导入{连接}；从 "./actions/index" 导入 { scoreAction };从./actions/index"导入 * 作为动作；类 App 扩展组件 {构造函数(道具){超级(道具)；this.state = {得分:0};this.clickitem = this.clickitem.bind(this);}点击项目(用户){var url = "http://localhost:4000/generate-random";获取(网址).then(功能(响应){如果(响应状态> = 400){throw new Error("来自服务器的错误响应");}返回 response.json();}).then(函数(数据){var computer = data.item;console.log("------------------------------------");控制台日志(用户+计算机)；console.log("------------------------------------");如果 ((用户 ===摇滚"&& 计算机 ===剪刀")||(用户===纸"&&计算机===摇滚")||(用户===剪刀"&&计算机===纸")){console.log("------------------------------------");console.log("用户赢了！！");console.log("------------------------------------");this.props.increment();} else if (user === computer) {console.log("------------------------------------");console.log("领带");console.log("------------------------------------");} 别的 {console.log("------------------------------------");console.log("电脑赢了！！");console.log("------------------------------------");this.props.decrement();}});}使成为() {const { store } = this.context;console.log("------------------------------------");控制台日志(商店)；console.log("------------------------------------");返回 (<div className="AppTitle"><b>得分:</b><div><RoundedButton text="Rock" clickitem={this.clickitem}/><RoundedButton text="Paper" clickitem={this.clickitem}/><RoundedButton text="Scissors" clickitem={this.clickitem}/>

);}}函数 mapStateToProp(state) {返回{分数:状态}；}导出默认连接(mapStateToProp，动作)(应用程序)；

我收到一个错误

未处理的拒绝(类型错误):无法读取未定义的属性道具"(匿名函数)http://localhost:3000/static/js/bundle.js:18380:1518377 |console.log("------------------------------------");18378 |console.log("电脑赢了！！");18379 |console.log("------------------------------------");>18380 |this.props.decrement();|^ 18381 |}18382 |});18383 |}查看源代码

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

解决方案

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

export const INCREMENT = "SCORE_INCREMENT";export const DECREMENT = "SCORE_DECREMENT";导出函数增量(){返回 {类型:增量};}导出函数递减(){返回 {类型:递减};}

让我知道这是否有效.

也在你的 clickItem 函数中把它作为第一行:-

var that = this;

然后使用

访问增量和减量

that.props.decrement()

I am using redux in my application where I am trying to do increment and decrement.

/actions/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;

index.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")
);

App.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);

I am getting an error

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

Can anyone hint me what I am doing wrong ?

解决方案

If possible please change your action creator function to as follows:-

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


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

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

Let me know if this works.

Also inside your clickItem function put this as the first line:-

var that = this;

Then access increment and decrement using

that.props.decrement()

这篇关于未处理的拒绝(TypeError):无法读取 redux 中未定义的属性“道具"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！