如何在 Reactjs 中正确渲染数组中的元素？

Question

我正在构建一个用于订购披萨的 Web 应用程序。我希望这成为我投资组合的一部分。但我被困住了。我创建了一个模态并将一些内容硬编码到这个模态中，以使我能够对其进行样式设置。我想在单击按钮时使用此模式，但我想显示与单击的部分相关的动态内容，而不是硬编码的内容。

我在发布图片时遇到了一些问题，但可以通过https://chinomso1995.github.io/dodosPizza/ 访问该网站。

打开网站后，您会看到模式。图像显示在左侧，标题和段落显示在右侧。这都是硬编码的。但是，如果您查看披萨部分，您会看到我有一张披萨图片，然后列出了它的标题和成分。我正在尝试通过单击按钮在模式中动态显示披萨部分中的元素。

我已将元素分组到一个数组中，并尝试通过 props 访问它们，但没有成功。我只需要有关如何进行此操作的指示。这是我的第一个 react 项目。

Pizza 组件和模式的代码可以通过https://codepen.io/chinomso1995/pen/mdVzZJE 访问

我也会在这里发帖

Pizza 组件的代码

class pizzas extends Component {
  state ={
    pizzas: [
      {id:1, name: 'Chicken Curry', ingredients: 'Red onions, bell peppers, chicken, pineapple, mozzarella, tomato sauce, curry, chili peppers', price: '3100', image: chickenCurry },
      {id:2, name: 'Pepperoni Fresh', ingredients: 'Pepperoni, mozzarella, green peppers, pizza sauce', price: '2700', image: pepperoniFresh },
      {id:3, name: 'Chicken BBQ', ingredients: 'Chicken, red onions, corn, mozzarella, bbq sauce, tomato sauce', price: '2700', image: chickenBbq },
      {id:4, name: 'Shawarma Pizza', ingredients: 'Mayonnaise & ketchup, spicy chicken, red onions, tomatoes, mozzarella', price: '3100', image: sharwarmaPizza },
      {id:5, name: 'Chicken Suya', ingredients: 'Mayonnaise, spicy sauce, spicy chicken, bell peppers, red onions, suya sauce, tomato sauce, mozzarella, suya spice', price: '2700', image: chickenSuya },
      {id:6, name: 'Pepperoni', ingredients: 'Pepperoni, mozzarella, tomato sauce', price: '2700', image: pepperoni },
      {id:7, name: 'Beef Suya', ingredients: 'Mayonnaise, spicy sauce, spicy meatballs, bell peppers, red onions, mozzarella, suya sauce, tomato sauce, suya spice', price: '2700', image: beefSuya },
      {id:8, name: 'Chicken Supreme', ingredients: 'Spicy sauce, chicken and spicy chicken, mushrooms, bell peppers, olives, red onions, mozzarella, tomato sauce', price: '3100', image: chickenSupreme },
      {id:9, name: 'Sweet Chili Chicken', ingredients: 'Spicy sauce, chicken, chili pepper, mozzarella, sweet chili sauce, tomato sauce', price: '2700', image: chickenCurry },
      {id:10, name: 'Spicy Mixed Pizza', ingredients: 'Spicy sauce, spicy meatballs, spicy chicken, chili pepper, corn, mozzarella, buffalo sauce, tomato sauce', price: '3100', image: spicyMixedPizza },
      {id:11, name: 'Margherita', ingredients: 'Mozarella, tomato sauce', price: '2200', image: margherita },
      {id:12, name: 'Super Meaty', ingredients: 'Chicken, pepperonni, sausages, mozzarella, tomato sauce', price: '3100', image: superMeaty },
      {id:13, name: 'Cheesy Chicken', ingredients: 'Chicken, tomatoes, cheddar, mozzarella, cheese sauce', price: '2700', image: cheesyChicken },
      {id:14, name: 'Cheeseburger Pizza', ingredients: 'Beef, tomatoes, red onions, cheddar, mozzarella, mayonnaise & ketchup, tomato sauce', price: '3100', image: cheeseBurger },
      {id:15, name: 'Meaty Overload', ingredients: 'Spicy sauce, pepperonni, spicy meatballs, chicken, sausages, mozzarella, tomato sauce', price: '3400', image: meatyOverload },
      {id:16, name: 'Meaty BBQ', ingredients: 'Beef, pepperonni, sausages, mozzarella, bbq sauce, tomato sauce', price: '3100', image: meatyBbq },
      {id:17, name: 'Hawaiian', ingredients: 'Chicken, pineapple, mozzarella, sweet chili sauce, tomato sauce', price: '2700', image: hawaiian },
      {id:18, name: 'Veggie Overload', ingredients: 'Mushrooms, bell peppers, corn, olives, red onions, tomatoes, mozzarella, tomato sauce', price: '3100', image: veggieOverload }
    ],
    showModal: false,
  }
  removeModalHandler = (item)=>{
    this.setState({showModal: !this.state.showModal})
  }
  render(){
  return (
   <Aux>
   { this.state.showModal ?
     <Modal ingredients={this.state.pizzas.ingredients} image={this.state.pizzas.image} name={this.state.pizzas.name} key={this.state.pizzas.id}/>: null}
   <div className={styles.Pizza}>
     <h1>Pizza</h1>
     <div className={styles.PizzaContainer}>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={chickenCurry} alt="chickencurry"/>
          <h1>Chicken Curry</h1>
          <p>Red onions, bell peppers, chicken, pineapple, mozzarella, tomato sauce, curry, chili peppers</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button onClick={this.removeModalHandler}>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={pepperoniFresh} alt="pepperonifresh"/>
          <h1>Pepperoni Fresh</h1>
          <p>Pepperoni, mozzarella, green peppers, pizza sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={chickenBbq} alt="chickenbbq"/>
          <h1>Chicken BBQ</h1>
          <p>Chicken, red onions, corn, mozzarella, bbq sauce, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
         <img src={sharwarmaPizza} alt="sharwarma"/>
          <h1>Shawarma Pizza</h1>
          <p>Mayonnaise & ketchup, spicy chicken, red onions, tomatoes, mozzarella</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={chickenSuya} alt="chickensuya"/>
          <h1>Chicken Suya</h1>
          <p>Mayonnaise, spicy sauce, spicy chicken, bell peppers, red onions, suya sauce, tomato sauce, mozzarella, suya spice</p>
         </div>
        <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
        </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
           <img src={pepperoni} alt="pepperoni"/>
           <h1>Pepperoni</h1>
           <p>Pepperoni, mozzarella, tomato sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={beefSuya} alt="beefsuya"/>
          <h1>Beef Suya</h1>
          <p>Mayonnaise, spicy sauce, spicy meatballs, bell peppers, red onions, mozzarella, suya sauce, tomato sauce, suya spice</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={chickenSupreme} alt="chickensupreme"/>
          <h1>Chicken Supreme</h1>
          <p>Spicy sauce, chicken and spicy chicken, mushrooms, bell peppers, olives, red onions, mozzarella, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
         <img src={sweetChiliChicken} alt="sweetchillichicken"/>
          <h1>Sweet Chili Chicken</h1>
          <p>Spicy sauce, chicken, chili pepper, mozzarella, sweet chili sauce, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={spicyMixedPizza} alt="spicymixed"/>
          <h1>Spicy Mixed Pizza</h1>
          <p>Spicy          sauce, spicy meatballs, spicy chicken, chili pepper, corn, mozzarella, buffalo sauce, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={margherita} alt="margherita"/>
          <h1>Margherita</h1>
          <p>Mozzarella, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,200</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={superMeaty} alt="supermeaty"/>
          <h1>Super Meaty</h1>
          <p>Chicken, pepperonni, sausages, mozzarella, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={cheesyChicken} alt="cheesychicken"/>
          <h1>Cheesy Chicken</h1>
          <p>Chicken, tomatoes, cheddar, mozzarella, cheese sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={cheeseBurger} alt="cheeseburger"/>
          <h1>Cheeseburger Pizza</h1>
          <p>Beef, tomatoes, red onions, cheddar, mozzarella, mayonnaise & ketchup, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={meatyOverload} alt="meatyoverload"/>
          <h1>Meaty Overload</h1>
          <p>Spicy sauce, pepperonni, spicy meatballs, chicken, sausages, mozzarella, tomato sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,400</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={meatyBbq} alt="meatybbq"/>
          <h1>Meaty BBQ</h1>
          <p>Beef, pepperonni, sausages, mozzarella, bbq sauce, tomato sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦3,100</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={hawaiian} alt="hawaiin"/>
          <h1>Hawaiian</h1>
          <p>Chicken, pineapple, mozzarella, sweet chili sauce, tomato sauce</p>
         </div>
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
       <div className={styles.PizzaCard}>
         <div className={styles.PizzaCardHeader}>
          <img src={veggieOverload} alt="veggie"/>
          <h1>Veggie Overload</h1>
          <p>Mushrooms, bell peppers, corn, olives, red onions, tomatoes, mozzarella, tomato sauce</p>
         </div> 
         <div className={styles.PizzaCardFooter}>
          <h3>from ₦2,700</h3>
          <button>Select</button>
         </div>
       </div>
     </div>
   </div>
   </Aux>
  )
}
}
export default pizzas;

模态代码

class pizzaModal extends Component {
  state = {
    selected: "small"
  }
  toggleHandler = (size)=> ()=>{
    this.setState({
            toggle: size
        });
  }
  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 (
      <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>Add to basket for ₦4,100</button>
                </div>
              </div>
              </div>
            </div>
            
          </div>
      </div>
    )
  }
}
export default pizzaModal;

Answer 1

我认为问题出在这一行：

<Modal ingredients={this.state.pizzas.ingredients} image={this.state.pizzas.image} name={this.state.pizzas.name} key={this.state.pizzas.id}/>: null}

Pizzas 是一个对象数组，所以如果您的模态函数是展示选定的比萨饼，那么只需将相关的比萨饼传递给您的模态道具，例如：

this.state.pizzas[0]

<Modal ingredients={this.state.pizzas[0].ingredients} image={this.state.pizzas[0].image} name={this.state.pizzas[0].name} key={this.state.pizzas[0].id}/>: null}

或者更好地使用类似的变量：const selected_pizza = 0;

<Modal ingredients={this.state.pizzas[selected_pizza].ingredients} image={this.state.pizzas[selected_pizza].image} name={this.state.pizzas[selected_pizza].name} key={this.state.pizzas[selected_pizza].id}/>: null}

您可能想看看使用Javascrip map() 函数将代码修剪为一个简单的调用来呈现此元素

<div className={styles.PizzaCard}>
 <div className={styles.PizzaCardHeader}>
  <img src={margherita} alt="margherita"/>
  <h1>Margherita</h1>
  <p>Mozzarella, tomato sauce</p>
 </div>
 <div className={styles.PizzaCardFooter}>
  <h3>from ₦2,200</h3>
  <button>Select</button>
 </div>

例如：

pizzas.map(p => {
    return <div>
        <div className={styles.PizzaCard}>
            <div className={styles.PizzaCardHeader}>
                <img src={margherita} alt="margherita"/>
                <h1>{p.name}</h1>
                <p>{p.ingredients}</p>
            </div>
        <div className={styles.PizzaCardFooter}>
            <h3>from {p.price}</h3>
            <button>Select</button>
        </div>
    </div>
</div>
});