src\components\cards.js Line 75:68: 'index' is not defined no-undef 搜索關鍵字以了解有關每個錯誤的更多信息

Question

我是 javascript 和反應 js 的完整初學者。 我已經閱讀了反應文檔，javascript 基礎知識，觀看了教程，但遇到了這個錯誤。 我正在分享我的代碼。 如果有人可以幫助我，我將不勝感激。 我想在cards.js的p標簽內顯示事件displayButton。 此外，我想在文件 app.js 的單獨部分中顯示總價（即每張卡上的 ADD 按鈕的總和）。

等待您的回復。在此先感謝。

我正在共享兩個文件，即：App.js 和cards.js。這是我的代碼：

應用程序.js

import React, { Component } from "react";


import "bootstrap/dist/css/bootstrap.min.css";

import "./App.css";

import Cards from './components/cards';

import Banner from './components/banner';

import Footer from './components/footer';


class App extends Component {

  constructor(props){

    super(props);

    this.state ={
      
    }
  }
  render() {

  return (

    <>
      <div className="container">

        <Banner/>

        <div className="container">

          <div className="row">

            <div className="col-4 col-sm-6 col-lg-4">

            <Cards/>

            </div>

            <div className="col-4 col-sm-6 col-lg-4">

            <Cards/>

            </div>

            <div className="col-4 col-sm-6 col-lg-4">

            <Cards/>

            </div>

            <div className="col-4 col-sm-6 col-lg-4">

            <Cards/>

            </div>

            <div className="col-4 col-sm-6 col-lg-4">

            <Cards/>

            </div>

          </div>

          <div className="container">

         <p>Total Price: ${this.state.totalPrice}</p>

      </div>

        </div>

      </div>

      <Footer/>

          </>
  );

}

}


export default App;

卡片.js

import React, { Component } from "react";


class Cards extends Component {

  constructor() {

    super();

    this.state = {

      totalPrice: 0,

      items: [

        {id: 1, price: 2950, isAdded: false},

        {id: 2, price: 2950, isAdded: false},

        {id: 3, price: 2950, isAdded: false},

        {id: 4, price: 2950, isAdded: false},

        {id: 5, price: 2950, isAdded: false},

      ],

    };

    this.displayButton = this.displayButton.bind(this);


  }
  


  handleAddonClick(price,index) {

    let localState = this.state;

    localState.totalPrice = localState.totalPrice + price;

    localState.items[index].isAdded = true;

    this.setState(localState);

  }

  handleRemoveonClick(price,index) {

    let localState = this.state;

    localState.totalPrice = localState.totalPrice - price;

    localState.items[index].isAdded = false;

    this.setState(localState);

  }

  displayButton(item,index) {

    if (item.isAdded === true) {

      return (

        <button className="btn btn-outline-secondary" onClick = {() => {

      this.handleRemoveonClick(item.price,index); 

        }}>Remove</button>

      );

    }

    else {

      return(

        <button className="btn btn-outline-secondary" onClick = {() => {

      this.handleAddonClick(item.price,index);

        }}>Add</button>

      );

    }
    
  }

  
  render() {

    return (

      <>

      <div className="card mb-3">

      <div className="card-body">

        <h5 className="card-title">Lorem Ipsum</h5>

        <p className="card-text">

          Quis dolore officia excepteur veniam nulla.

        </p>

        <p className="card-text">

          Quis dolore officia excepteur veniam nulla.

        </p>

        <br></br>

        <p className="card-text">

          Quis dolore officia excepteur veniam nulla.

        </p>

        <p className="card-text">

          <img src="/images/box.jpg" className="box" />

        </p>

        <p className="card-text">

        Price: {this.displayButton(this.state.item,index)}

           
          <br></br>$2950

        </p>

      </div>

      </div>

      
</>

    );

  
 }

}


export default Cards;

Answer 1

這部分在這里： index未定義。

        <p className="card-text">

        Price: {this.displayButton(this.state.item,index)}

           
          <br></br>$2950

        </p>

我希望您在頂部映射您的卡片，但我沒有看到。 在你的卡片文件中是這樣的：

render() {
  return (
    <>
      {this.state.items.map((card, index) => {
        return (
          // all your same stuff
        );
      })}
    </>
  )
}