javascript - 如何在基于类的组件中正确使用 React 上下文 API？

Question

我正在尝试创建一个订单页面。它类似于购物车。我想显示已在此页面上订购的商品。订单页面已单独创建。我有一个模态页面，我正在尝试将项目从模态页面获取到订单页面。

这是 Context API 的 JSX 代码

import React, {useState} from 'react';

export const CartContext = React.createContext();

export const CartProvider = (props)=>{
  const [orders, setOrders] = useState([]);
  return (
    <CartContext.provider value={[orders, setOrders]}>
     {props.children}
    </CartContext.provider>
  )
}

模态的 JSX 代码

class pizzaModal extends Component {
  state = {
    selected: "small",
    showModal: true,
    
  }
  static contextType = CartContext
  toggleHandler = (size)=> ()=>{
    this.setState({
            toggle: size
        });
  }
  
    

  addToOrders = ()=>{
    const [orders, setOrders] = this.contextType;
    const pizza = {name: this.props.name, ingredients: this.props.ingredients, image: this.props.image, price: this.props.price}
    setOrders(curr=> [...curr, pizza])
  }
  
  render (){
    
    let attachedClasses = [styles.ImageContainer]
    if(this.state.toggle==='small'){
      attachedClasses = [styles.ImageContainer, styles.Small]
    }
    if(this.state.toggle==="medium"){
      attachedClasses = [styles.ImageContainer, styles.Medium]
    }
    if(this.state.toggle==="large"){
      attachedClasses=[styles.ImageContainer, styles.Large]
    }
    return (
      <Aux>
        <div className={styles.Pizzamodal}>
          <div className={styles.ModalContainer}>
            <div className={attachedClasses.join(' ')}>
              <img  src={this.props.image} alt="pizzapicture"/>
            </div>
            <div className={styles.DetailsContainer}>
              <div>
                <div className={styles.TextDetails}>
                  <h1>{this.props.name}</h1>
                  <p>{this.props.ingredients}</p>
                </div>
                <div>
                <div className={styles.Form}>
                <form className={styles.switchButton}>
                  <input type="radio" name="pizza" id="small" value="small" onChange={this.toggleHandler("small")}
                            checked={this.state.toggle==="small"}/>
                  <label for="small">Small</label>
                  <input type="radio" name="pizza" id="medium" value="medium" onChange={this.toggleHandler("medium")}
                            checked={this.state.toggle==="medium"}/>
                  <label for="medium">Medium</label>
                  <input type="radio" name="pizza" id="large" value="large" onChange={this.toggleHandler("large")}
                            checked={this.state.toggle==="large"}/>
                  <label for="large">Large</label>
                </form>
                </div>
                <div className={styles.orderButton}>
                  <button onClick={this.addToOrders}>Add to basket for ₦{this.props.price}</button>
                </div>
              </div>
              </div>
            </div>  
            <div className={styles.Navbar} onClick={this.props.clicked}>
            <div></div>
            <div></div>
          </div>
          </div>
         
      </div>
      </Aux>
    )
  }
}
export default pizzaModal;

我尝试使用 JSX 代码的 Order 组件的 JSX 代码

<div className={Styles.OrderHeader}>
         <div>
          <img src={Logo} alt="logo"/>
          <h1>DODO PIZZA</h1>
         </div> 
        </div>  
        <h1 className={Styles.OrderContentContainerHeader}>My order</h1>
       <div className={Styles.OrderContentContainer}>
          <div className={Styles.OrderContent}>
            <div>
               <div style={{paddingRight: '80px'}}>
                 <img src={orders.image} alt="pizza"/>
               </div>
               <div>
                 <h1>{orders.name}</h1>
                 <p>{orders.ingredients}</p>
               </div>
            </div>
            <div className={Styles.OrderContentPrice}>
               <div><span>1</span></div>
               <div><span>₦{orders.price}</span></div>
            </div>

当我单击具有添加到订单功能的事件侦听器时，我收到 undefined is not iterable 的错误。如果我取出声明的变量，我会收到警告。如果我在渲染方法中声明它们，我不会收到警告，但我会在 setOrders 函数上获得未定义。

标签： javascriptreactjs