Reactjs 未处理的拒绝（TypeError）：无法读取属性'；道具'；在redux中未定义的_Reactjs_Redux_React Redux

Reactjs 未处理的拒绝（TypeError）：无法读取属性'；道具'；在redux中未定义的

reactjs redux

Reactjs 未处理的拒绝（TypeError）：无法读取属性'；道具'；在redux中未定义的,reactjs,redux,react-redux,Reactjs,Redux,React Redux,我在我的应用程序中使用了redux，我试图进行递增和递减操作 /actions/index.js export const INCREMENT = "SCORE_INCREMENT"; export const DECREMENT = "SCORE_DECREMENT"; const scoreAction = { increment() { return { type: INCREMENT }; }, decrement() { return

我在我的应用程序中使用了

redux

，我试图进行递增和递减操作

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

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;

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

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

有人能告诉我我做错了什么吗？

看起来像是上下文问题。尝试在fetch中使用箭头函数

  fetch(url)
      .then((response) => {
        if (response.status >= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      })
      .then((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();
        }
      });

看起来像是上下文问题。尝试在fetch中使用箭头函数

  fetch(url)
      .then((response) => {
        if (response.status >= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      })
      .then((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();
        }
      });

有几个问题第一个问题是没有绑定调用减量函数的函数

其次，减量不是直接作为组件的支柱，而是组件的内部动作

第三，你需要采取行动。您可以将代码更改为以下内容

import scoreAction 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((response) => {
        if (response.status >= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      })
      .then((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 };
}
function mapDispatchToProps(dispatch) {
   return bindActionCreators({decrement: scoreAction.decrement, increment:  scoreAction.increment}, dispatch)
}
export default connect(mapStateToProp, mapDispatchToProps)(App);

有几个问题第一个问题是没有绑定调用减量函数的函数

其次，减量不能直接用作组件的道具，但它是内部动作

第三，你需要采取行动。您可以将代码更改为以下内容

import scoreAction 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((response) => {
        if (response.status >= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      })
      .then((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 };
}
function mapDispatchToProps(dispatch) {
   return bindActionCreators({decrement: scoreAction.decrement, increment:  scoreAction.increment}, dispatch)
}
export default connect(mapStateToProp, mapDispatchToProps)(App);

如果可能，请将您的action creator功能更改为：-

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


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

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

让我知道这是否有效

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

var that = this;

然后使用

that.props.decrement()

如果可能，请将您的action creator功能更改为：-

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


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

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

让我知道这是否有效

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

var that = this;

然后使用

that.props.decrement()

这个

实际上并不是指这里的组件。@wesley6j你是对的。我使用了箭头功能，现在我得到了这个。试试这个。道具。记分动作。decrement@VivekN我尝试了相同的问题

未处理的拒绝（TypeError）：无法读取未定义的属性“increment”，并且在clickItem函数中执行此var=this；然后访问.props.scoreAction.decrement（）这个
实际上并没有引用这里的组件。@wesley6j你是对的。我使用了箭头功能，现在我得到了这个。试试这个。道具。记分动作。decrement@VivekN我尝试了相同的问题未处理的拒绝（TypeError）：无法读取未定义的属性“increment”，并且在clickItem函数中执行此var=this；然后访问.props.scoreAction.decrement（）现在我得到未处理的拒绝（TypeError）：\u这个2.props.decrement不是一个函数，在我的场景中使用箭头函数帮助了我。现在我得到未处理的拒绝（TypeError）：_this2.props.decrement不是一个函数
使用箭头函数在我的场景中帮助了我。我得到第76行：“bindActionCreators”没有定义没有定义。你需要导入，使用“redux”中的import{bindActionCreators}
我仍然得到相同的未处理的拒绝（TypeError）：无法读取未定义（匿名函数）D:\ReactJS\rock-paper-scissors-app\src\app.js:50 47 | console.log（“-------------------------------------”）的属性“decrement”；48 | console.log（“Computer-won！！”）；49 | console.log（“---------------------------------------”）>50 |这个。道具。动作。减量（）；51 |       }   52 |     });   53 |}
您是否使用箭头函数绑定回调检查更新的答案，scoreActions是默认导出，因此使用了不同的方式我得到第76行：“bindActionCreators”未定义没有未定义您需要导入，请使用“redux”中的导入{bindActionCreators}
我仍然收到相同的未处理的拒绝（TypeError）：无法读取未定义（匿名函数）D:\ReactJS\rock paper scissors app\src\app.js的属性“decrement”：50 47 | console.log（-----------------------------------------------）；48 | console.log（“Computer won！！”）；49 | console.log（-------------------------------------）>50 | this.props.actions.decrement（）；51 |}52 |}）；53 |
是否使用箭头函数绑定回调检查更新的答案，scoreActions是默认导出，因此使用它的方式不同于.props.decrement（）
-这将调用动作创建者，并在还原器的帮助下更新状态。我看到的大多数例子都使用了dispatcher。你能帮忙吗？那是什么？如果我用它做同样的事情，它是如何工作的？或者分派操作是旧方法？即.props.decrement（）
-这将调用操作创建者并在还原器的帮助下更新状态。我看到的大多数例子都使用了dispatcher。你能帮忙吗？那是什么？如果我用它做同样的事情，它是如何工作的？还是调度行动是老办法？