Reactjs 当试图将更新的状态传递给组件时，如何修复MapStateTops未定义的问题？

我试图将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>
  );
};
}

---

我已经为您提供的代码创建了一个stackblitz 这对我很有效。 代码本身似乎很好。问题可能在于你在问题中没有表现出什么。确保您已经创建了您的应用商店

conststore=createStore（cookieReducer）

并通过使用
provider

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



另外，在声明操作类型（BUY_COOKIE等）时，在单独的文件中声明操作类型，您可以将它们导入到reducer中。如果需要，您可以在同一文件中声明动作创建者和动作类型。
显示您的rootReducer，CookieEducer的索引是什么？
// 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;
  }
};

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