Question

我是 javascript 和 react js 的完全初学者。我已经阅读了 react 文档、javascript 基础知识、观看了教程，但还是遇到了这个错误。我正在分享我的代码。如果有人可以帮助我，我将不胜感激。我想在cards.js的p标签内显示事件displayButton。此外，我想在文件 app.js 的单独部分中显示总价（这是每张卡上添加按钮的总和）。

等待您的回复。提前致谢。

我正在共享两个文件：App.js 和 card.js。这是我的代码：

App.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;

cards.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
        );
      })}
    </>
  )
}

src\components\cards.js Line 75:68: 'index' is not defined no-undef 搜索关键字以了解有关每个错误的更多信息

1 个答案: