在React中計算回傳NaN的價格-有解無憂

我正在嘗試使用 React 制作一個基本的商店應用程式。我也是 React 的初學者。問題是，當我嘗試制作價格計算器時，它回傳的是 NaN（不是數字）。我不知道為什么會這樣，有人可以幫助我嗎？

我的代碼：

import React from "react";
import Modal from "./Modal";
import "./login.css";
class App extends React.Component {
  state = {
    show: false,
    name: "",
    password: "",
    burger_quantity: 0,
    burger_price: 0,
  };
  showModal = (e) => {
    this.setState({
      show: !this.state.show,
    });
  };

  function1 = (event) => {
    this.setState({ name: event.target.value });
  };

  function2 = (event) => {
    this.setState({ password: event.target.value });
  };

  changeBurgerQuantity = (event) => {
    this.setState({ burger_quantity: event.target.value });
    const price = this.state.burger_quantity * this.state.burgerPrice;
    this.setState({ burger_price: price });
  };

  removeBurger = () => {
    this.setState({ burger_quantity: "0" });
  };

  burgerPrice = () => {
    const price = this.state.burger_quantity * this.state.burgerPrice;
    this.setState({ burger_price: price });
  };

  render() {
    return (
      <div>
        <div>
          <ul>
            <li>
              <p id="logo"> Mart</p>
            </li>
            <li>
              <a class="active">Home</a>
            </li>
            <li>
              <a onClick={this.function1}>Page 1</a>
            </li>
            <li>
              <a>Page 2</a>
            </li>
            <li>
              <a>Page 3</a>
            </li>
            <li>
              <a id="loggedinas">Logged in as: {this.state.name}</a>
            </li>
          </ul>
        </div>

        <center>
          <img src={logo} width="200" height="200" />
          <hr />
        </center>

        <br />
        <center>
          <div className="App">
            <button
              class="toggle-button"
              onClick={(e) => {
                this.showModal(e);
              }}
            >
              show Modal
            </button>

            <Modal onClose={this.showModal} show={this.state.show}>
              <h3>Login/Sign Up</h3>
              <input
                type="email"
                onChange={this.function1}
                maxLength="25"
              ></input>
              <br />
              <br />
              <input type="password" onChange={this.function2}></input>
            </Modal>
          </div>
        </center>

        <div class="container">
          <div class="column-item">
            <center>
              <img
                id="divimage"
                src="https://th.bing.com/th/id/R.163601bbba8775ef10230788abab7cd2?rik=WgyxMm8zfIKRBw&riu=http://wallpapersdsc.net/wp-content/uploads/2016/09/Burger-HD-Desktop.jpg&ehk=FEYSmbcw7WsmOsPpXFCwdBSZKqW1wZMiWJoxFuOlzQc=&risl=1&pid=ImgRaw&r=0"
              ></img>
              <hr></hr>
              <p id="itemheading">THE BURGER</p>
            </center>
          </div>
          <div class="column-item">
            <center>
              <img
                id="divimage"
                src="https://th.bing.com/th/id/R.163601bbba8775ef10230788abab7cd2?rik=WgyxMm8zfIKRBw&riu=http://wallpapersdsc.net/wp-content/uploads/2016/09/Burger-HD-Desktop.jpg&ehk=FEYSmbcw7WsmOsPpXFCwdBSZKqW1wZMiWJoxFuOlzQc=&risl=1&pid=ImgRaw&r=0"
              ></img>
              <hr></hr>
              <p id="itemheading">THE BURGER</p>
              <p id="itemdescription">Chicken burger. $5</p>
              <button onClick={this.removeBurger}>Remove from Cart</button>
              <input
                type="number"
                onChange={this.changeBurgerQuantity}
                id="itemQuantity"
              ></input>
              <p>Quantity: {this.state.burger_quantity}</p>
              <p>Price: {this.state.burger_price}</p>
            </center>
          </div>
          <div class="column-item">
            <center>
              <img
                id="divimage"
                src="https://th.bing.com/th/id/R.163601bbba8775ef10230788abab7cd2?rik=WgyxMm8zfIKRBw&riu=http://wallpapersdsc.net/wp-content/uploads/2016/09/Burger-HD-Desktop.jpg&ehk=FEYSmbcw7WsmOsPpXFCwdBSZKqW1wZMiWJoxFuOlzQc=&risl=1&pid=ImgRaw&r=0"
              ></img>
              <hr></hr>
              <p id="itemheading">THE BURGER</p>
            </center>
          </div>
        </div>

        <h1>{this.state.burger_quantity}</h1>
      </div>
    );
  }
}

export default App;

CSS：

html,
body {
  height: 100%;
}

.modal {
  width: 500px;
  background: white;
  border: 1px solid #ccc;
  transition: 1.1s ease-out;
  box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.2);
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
.modal.off {
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transform: scale(0.33);
  box-shadow: 1rem 0 0 rgba(0, 0, 0, 0.2);
}
@supports (offset-rotation: 0deg) {
  offset-rotation: 0deg;
  offset-path: path("M 250,100 S -300,500 -700,-200");
  .modal.off {
    offset-distance: 100%;
  }
}
@media (prefers-reduced-motion) {
  .modal {
    offset-path: none;
  }
}
.modal h2 {
  border-bottom: 1px solid #ccc;
  padding: 1rem;
  margin: 0;
}
.modal .content {
  padding: 1rem;
}
.modal .actions {
  border-top: 1px solid #ccc;
  background: #eee;
  padding: 0.5rem 1rem;
}
.modal .actions button {
  border: 0;
  background: #78f89f;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  line-height: 1;
}

button {
  margin: 10px;
  border-radius: 15px;
  font-size: small;
  width: 100px;
  height: 45px;
  border-color: rgb(0, 158, 250);
  background-color: #00c5ff;
  color: white;
}

button:hover {
  background-color: crimson;
}

/* Navbar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

#logo {
  color: white;
  padding-left: 10px;
  font-weight: bold;
}

#loggedinas {
  color: white;
  font-style: italic;
  font-weight: bold;
}

/* Navbar end */

hr {
  opacity: 0.2;
  margin-left: 200px;
  margin-right: 200px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column-item {
  flex: 1 0 61%; /* flex-grow, flex-shrink, flex-basis */
  flex-basis: 33%;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

#divimage {
  height: 210px;
  width: 250px;
  padding: 20px;
  border-radius: 250px;
}

#itemheading {
  color: goldenrod;
  font-weight: bold;
  font-size: medium;
}

#itemdescription {
  color: lightseagreen;
  font-style: italic;
  padding: 25px;
}

#itemQuantity {
  height: 25px;
  width: 200px;
}

我知道代碼有點亂，但我是 React 的初學者。

先感謝您。

uj5u.com熱心網友回復：

這是因為您在下一行使用了錯誤的狀態-

changeBurgerQuantity = (event) => {
    this.setState({ burger_quantity: event.target.value });
    const price = this.state.burger_quantity * this.state.burgerPrice;
    this.setState({ burger_price: price });
  };

它應該是 -

changeBurgerQuantity = (event) => {
    this.setState({ burger_quantity: event.target.value });
    const price = this.state.burger_quantity * this.state.burger_price;
    this.setState({ burger_price: price });
  };

狀態名稱是burger_price并且您正在使用burgerPrice，因為這個 burgerPrice 是未定義的并且它回傳 NaN。

在這里檢查代碼沙盒

uj5u.com熱心網友回復：

所有輸入 - 甚至 type="number" 都會回傳值的字串表示形式 - 在這種情況下，這意味著您需要在計算價格之前將值決議為數字。NaN 來自您嘗試使用字串值執行計算的事實。

 changeBurgerQuantity = (event) => {
    this.setState({ burger_quantity:  parseInt(event.target.value, 10) });
    const price = this.state.burger_quantity  * this.state.burgerPrice;
    this.setState({ burger_price: price });
  };

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/461115.html

標籤：javascript html 反应楠

上一篇：Javascript，當值為零時發出警報

下一篇：按條件Reactjsx更改按鈕標題