Saya sedang menjalankan proyek yang dapat mengubah harga suatu produk (diambil dari API palsu) kemudian dengan mengklik tombol saya memperbarui dengan menghitung PPN 20%. Saya mengalami masalah, saya ingin memiliki status harga dan dalam status ini, itu adalah nilai entri saya yaitu {listProduct.price}, sehingga harga API saya ditampilkan awalnya di input ( yaitu $ 105,95 untuk artikel pertama, ...) tetapi tidak berhasil.

Anda pertama-tama akan menemukan kode bagian ProductsDetails di mana ia menampilkan halaman produk dan kode produk yang mengambil data dari API

Jika Anda memiliki solusi, saya tertarik, terima kasih sebelumnya. (maaf, saya baru mengenal React, saya masih kesulitan dengan semua konsep ini)

Detail Produk

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>
        )
    } 
}

Produk

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>
        )
    }
}
1
RitalCharmant 13 Mei 2021, 02:04

1 menjawab

Jawaban Terbaik

Karena Anda ingin menampilkan beberapa data dalam satu komponen dan memperbarui data itu dari yang lain, maka solusinya di sini adalah Meningkatkan Status. Pindahkan status produk dan pengambilan data ke nenek moyang yang sama untuk komponen ProductsDetails dan Products.

Saran:

  1. Deklarasikan productsData, pengambilan data, dan pengendali updatePrice di komponen induk.

    function App() {
      const [productsData, setProductsData] = useState([]);
    
      useEffect(() => {
        axios.get("https://fakestoreapi.com/products?limit=7").then((res) => {
          console.log(res.data);
          setProductsData(res.data);
        });
      }, []);
    
      const updatePrice = (id, price) => {
        setProductsData((productsData) =>
          productsData.map((product) =>
            product.id === Number(id)
              ? {
                  ...product,
                  price: Number(price)
                }
              : product
          )
        );
      };
    
      return (
        <div className="App">
          <Router>
            <Switch>
              <Route
                path="/products-details/:id"
                render={(props) => (
                  <ProductsDetails
                    products={productsData}
                    updatePrice={updatePrice}
                    {...props}
                  />
                )}
              />
              <Route path="/">
                <Products products={productsData} />
              </Route>
            </Switch>
          </Router>
        </div>
      );
    }
    
  2. Perbarui Products untuk menggunakan prop products dari induknya.

    class Products extends Component {
      render() {
        const listsProducts = this.props.products.map((listProduct) => {
          return (
            <tbody className="products__body" key={listProduct.id}>
              <tr>
                <td>
                  {" "}
                  <Link
                    to={{
                      pathname: "/products-details/" + listProduct.id
                    }}
                  >
                    {listProduct.title}
                  </Link>
                </td>
                <td className="products__category">{listProduct.category}</td>
                <td>{Number(listProduct.price).toFixed(2)}</td>
                <td>
                  {Number(listProduct.price * 1.2).toFixed(2)} €
                </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>
        );
      }
    }
    
  3. Perbarui ProductsDetails untuk menggunakan prop callback products dan updatePrice. Buat submitHandler untuk formulir untuk memperbarui harga. Untuk input, Anda akan ingin menggunakan prop defaultValue karena Anda ingin memberikan nilai awal tetapi tidak segera mengubah data aslinya.

    class ProductsDetails extends Component {
      constructor(props) {
        super(props);
        this.state = { id: this.props.match.params.id, price: 0 };
      }
    
      updatePrice = (e) => {
        console.log(e);
        this.setState({
          price: e.target.value
        });
      };
    
      submitHandler = (e) => {
        e.preventDefault();
        const {
          match: {
            params: { id }
          }
        } = this.props;
        this.props.updatePrice(id, this.state.price);
      };
    
      render() {
        const {
          match: {
            params: { id }
          },
          products
        } = this.props;
    
        const listProduct = products.find((product) => product.id === Number(id));
    
        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" onSubmit={this.submitHandler}>
                  <input
                    className="input__price"
                    type="text"
                    defaultValue={Number(listProduct.price).toFixed(2)}
                    onChange={this.updatePrice}
                  />
                  <p>
                    Price (including VAT):{" "}
                    {Number(listProduct.price * 1.2).toFixed(2)} €
                  </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>
        );
      }
    }
    

Edit state-from-api-in-react

1
Drew Reese 13 Mei 2021, 00:11