TypeError：無法讀取屬性'分數'未定義在REDD

Question

我在我的應用程序中集成redux，我試圖增加/減少分數和更新匹配狀態的增量和減量。

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 { bindActionCreators } from "redux"; 
import * as actions from "./actions/index"; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     score: 0, 
     status: "" 
    }; 
    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; 
     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() { 
    return (
     <div className="AppTitle"> 
     <b>Score: {this.props.score}</b> 
     <div> 
      <RoundedButton text="Rock" clickitem={this.clickitem} /> 
      <RoundedButton text="Paper" clickitem={this.clickitem} /> 
      <RoundedButton text="Scissors" clickitem={this.clickitem} /> 
     </div> 

     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { score: state.score, status: state.status }; 
} 

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

動作/ index.js

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

let score = 0; 

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

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

減速器/ index.js

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

const initialState = { score: 0, status: "" }; 

const scoreReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case actions.INCREMENT: 
     return { score: action.score, status: "You won!" }; 
    case actions.DECREMENT: 
     return { score: action.score, status: "Computer won!" }; 
    default: 
     break; 
    } 
}; 

export default scoreReducer; 

index.js

import React from "react"; 
import ReactDOM from "react-dom"; 
import App from "./App"; 
import registerServiceWorker from "./registerServiceWorker"; 
import "./index.css"; 

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

我正在低於錯誤。任何人都可以建議我做錯了什麼？

TypeError: Cannot read property 'score' of undefined 
Function.mapStateToProps [as mapToProps] 
D:\ReactJS\rock-paper-scissors-app\src\App.js:68 
    65 | } 
    66 | 
    67 | function mapStateToProps(state) { 
> 68 | return { score: state.score, status: state.status }; 
    69 | } 
    70 | 
    71 | export default connect(mapStateToProps, actions)(App); 
View compiled 

Answer 1

您正在收到錯誤，因爲當沒有任何操作被觸發時，您不會返回任何內容。

從你減速，你需要在默認情況下

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

const scoreReducer = (state = {}, action) => { 
    switch (action.type) { 
    case actions.INCREMENT: 
     return { score: action.score, status: "You won!" }; 
    case actions.DECREMENT: 
     return { score: action.score, status: "Computer won!" }; 
    default: 
     return state 
     break; 
    } 
}; 

export default scoreReducer;