嘗試將更新的狀態傳遞給組件時，如何修復未定義的 mapStateToProps？

Question

我試圖將 onClick 后的狀態傳遞給組件
但它不顯示，因為它是未定義的。 我想將狀態顯示為待售餅干的剩余數量

class CookieContainer extends Component {
  render(){
  return (
    <div className="donutShop" >
    //below I want to pass the updated state but {this.props.numOfCookies} is undefined
      <h2>Cookies available for Sale: {this.props.numOfCookies}</h2>
      <button onClick={this.props.buyCookie}>Buy cookie</button>
    </div>
  );
};
}

numOfCookies：當作為道具傳遞給 CookieContainer 時未定義

const mapStateToProps = state => ({numOfCookies: state.numOfCookies})

// dispatch
const mapDispatchToProps = dispatch => {
  return {
    buyCookie: () => dispatch(buyCookie())
  };
};

let ConnectedCookie = connect(mapStateToProps, mapDispatchToProps)(CookieContainer)

export default ConnectedCookie

// action
export const buyCookie = () => {
  return {
    type: BUY_COOKIE,
    content: 1
  };
};


// state
const initialCookieState = {
    numOfCookies: 100
}


const BUY_COOKIE = "BUY_COOKIE";
//reducer
const cookieReducer = (state = initialCookieState, action) => {
  switch (action.type) {
    case BUY_COOKIE:
      return {
        ...state,
        numOfCookies: state.numOfCookies - action.content
      };
    default:
      return state;
  }
};

Answer 1

我為您在此處提供的代碼創建了一個 stackblitz，它對我有用。 代碼本身看起來不錯。 問題可能出在您未在問題中顯示的內容中。 確保您已創建商店

const store = createStore(cookieReducer);

並通過使用provider包裝您的應用程序正確傳遞您的商店

 <Provider store={store}>
    <App />
 </Provider>

同樣在聲明動作類型（BUY_COOKIE 等）時，在單獨的文件中聲明動作類型，您可以將它們導入到減速器中。 如果需要，您可以在同一文件中聲明動作創建者和動作類型。