【发布时间】：2021-08-03 07:28:20
【问题描述】：
我正在执行一个项目，该项目可以修改产品的价格（从虚假 API 中检索），然后通过点击一个按钮我通过计算 20% 的增值税来更新。我遇到一个问题，我想要一个价格状态，在这个状态下，它是我的条目的值，即 {listProduct.price}，因此我的 API 的价格最初显示在输入中（即 $105.95对于第一篇文章，...）但它不起作用。
您将首先找到 productsDetails 部分的代码，它显示产品页面和从 API 检索数据的产品代码
如果您有任何我感兴趣的解决方案，请提前致谢。 （抱歉，我是 React 新手，我还在为所有这些概念而苦苦挣扎）
产品详情
import React, { Component } from 'react'
import '../css/ProductsDetails.css'
import {AiOutlineArrowLeft} from "react-icons/ai";
import {Link} from 'react-router-dom'
export default class ProductsDetails extends Component {
constructor(props) {
super(props);
this.state = {id: this.props.match.params.id, price: };
}
updatePrice = (e) => {
console.log(e);
this.setState({
price: e.target.value
})
}
render() {
const {location: {state: {listProduct}}} = this.props;
return (
<div className="products__details">
<Link to="/"><AiOutlineArrowLeft className="nav__arrow" /></Link>
<h1 className="details__title">{listProduct.title}</h1>
<div className="details__align--desk">
<div className="details__img">
<img className="product__img" src={listProduct.image} alt="Affichage du produit"/>
</div>
<div className="products__align--desk">
<h2 className="product__title">Description</h2>
<p className="product__description">{listProduct.description}</p>
<h2 className="product__title">Price</h2>
<form className="form__price">
<input className="input__price" type="text" value={listProduct.price} onChange={this.updatePrice} />
<p>Price (including VAT): {Math.round((listProduct.price + listProduct.price * 0.2)*100) /100} €</p>
<br/>
<input className="btn__update" type="submit" value="Update product" />
</form>
</div>
<div className="category__align--desk">
<h2 className="product__title">Category</h2>
<p className="product__category">{listProduct.category}</p>
</div>
</div>
</div>
)
}
}
产品
import React, { Component } from 'react';
import '../css/Products.css';
import axios from 'axios';
import './ProductsDetails'
import {Link} from 'react-router-dom'
export default class Products extends Component {
constructor(props) {
super(props);
this.state = {productsData: []};
}
componentDidMount = () => {
axios.get('https://fakestoreapi.com/products?limit=7')
.then(res => {
console.log(res.data)
this.setState ({
productsData: res.data
})
})
}
render() {
const listsProducts = this.state.productsData.map(listProduct => {
return <tbody className="products__body">
<tr>
<td> <Link to={{pathname: "/products-details/" + listProduct.id,state: {listProduct}}}>{listProduct.title}</Link></td>
<td className="products__category">{listProduct.category}</td>
<td>{listProduct.price}</td>
<td>{Math.round((listProduct.price + listProduct.price * 0.2)*100) /100}</td>
</tr>
</tbody>
})
return (
<main className="products">
<h1 className="products__title">Products management</h1>
<table cellSpacing="0">
<thead className="products__head">
<tr>
<th className="table--title">Product name</th>
<th className="table--title">Category</th>
<th className="table--title">Price</th>
<th className="table--title">Price (including VAT)</th>
</tr>
</thead>
{listsProducts}
</table>
</main>
)
}
}
【问题讨论】：
-
抱歉，我将您的代码复制/粘贴到正在运行的 codesandbox 中，并且它运行没有问题（在 `ProductDetails 中提供了有效的初始
price状态后。到底是什么问题？ -
感谢您的回答，问题是我无法将 listProduct.price 的初始价格放入我的状态，我该怎么办？
标签： reactjs api components state