如何在React中设置两个组件？

Question

我创建了一个电子商务网站。在我的产品中，我为每种产品都有一个单击功能，将产品推向本地存储并更新购物车的状态。 但是，我的CART.JS包含总产品，税收，总金额等。 如何添加SetState以使其在添加产品时更新？我尝试在CART.JS的返回部分中添加SetState，但最终创建了一个无尽的错误消息循环。以下是代码：

import React,{Component} from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faCartPlus} from "@fortawesome/free-solid-svg-icons";





class Products extends Component {
  constructor(props, context) {
   super(props)
   this.state={
    shoppingCart:[]
   }
  }

 
  addToCart=(item)=>{
  
    this.state.shoppingCart.push(item)
    this.setState({shoppingCart:this.state.shoppingCart})
    localStorage.setItem('cart',JSON.stringify(this.state.shoppingCart))

  }
  
  render() {
    
   
    return (
      <div className="container prod-cntr">
        <div className="row prod-row">
          {this.props.products?.map((element) => (
            <div className="col-lg-3 prod-col" key={element.id}>
              <div className="card card-container">
                <img
                  src={element.image}
                  alt="product img"
                  className="prod-img"
                />
                <div className="card-body">
                  <p className="card-title">{element.product}</p>
                  <p className="card-text">{element.description}</p>
                  <p className="prod-price">{element.price}  <FontAwesomeIcon icon={faCartPlus} className="prod-carticon" onClick={()=>{this.addToCart(element)}} /></p>
                  
                </div>
              </div>
            </div>
          ))}
        </div>
        <div>
              </div>
      </div>
    );
  }
}

export default Products;

import React, { Component } from "react";
import plus from "./assets/images/plus.svg";
import minus from "./assets/images/minus.svg";


class Cart extends Component{
    constructor(props){
        super(props)

this.state = {
    totalItems: 0,
    amount:0,
    taxes: 0,
    totalAmount: 0
}
        
    }
    render(){


const cartItems = JSON.parse( localStorage.getItem('cart'));
const totalItems = cartItems?.length || 0;
const amount = cartItems?.reduce((accumulator, object) => {
    return accumulator + object.price;},0) ||0;
const taxes = (amount * 0.065);
 const totalAmount = amount + taxes;

return(<>
<div>
<h2>YOUR CART</h2>
<p>Total Items <span>{this.state.totalItems} </span></p>
<p>Amount <span>{this.state.amount}</span></p>
<p>Total Taxes <span>{this.state.taxes}</span></p>
<p>Total Amount <span>{this.state.totalAmount}</span></p>

<p>Check Out</p>
</div>
      <div className="container prod-cntr">
        <div className="row prod-row">
          {cartItems?.map((element) => (
            <div className="col-lg-3 prod-col" key={element.id}>
              <div className="card card-container">
                <img
                  src={element.image}
                  alt="product img"
                  className="prod-img"
                />
                <div className="card-body">
                  <p className="card-title">{element.product}</p>
                  <p className="card-text">{element.description}</p>
                  <div className = "quantity-container">
                  <img src={minus} className ="minus"/> <p className ="quantity" >QUANTITIY:<span className="qnty-txt"></span></p> <img src={plus} className ="plus"/> 
                 </div>
                 <button onClick={localStorage.removeItem("item")}>Remove From Cart</button> 
                </div>
              </div>
            </div>
          ))}
        </div>
        <div>
        </div>
      </div>

        </>)
    }
}

export default Cart;

Answer 1

您必须在类组件中创建createref，因为您可以看到我使用的以下代码createref，必须在this.items < /code>，然后您必须在setState中设置this.items。我希望这会有所帮助。

class Products extends Component {
    constructor(props, context) {
     super(props)
     this.state={
     }
     this.items = React.createRef([]);
    }
  
   
    addToCart=(item)=>{
      this.items.current.push(item);
      
      localStorage.setItem('cart',JSON.stringify(this.items.current))
  
    }
    
    render() {
      
     
      return (
        <div className="container prod-cntr">
          <div className="row prod-row">
            {this.props.products?.map((element) => (
              <div className="col-lg-3 prod-col" key={element.id}>
                <div className="card card-container">
                  <img
                    src={element.image}
                    alt="product img"
                    className="prod-img"
                  />
                  <div className="card-body">
                    <p className="card-title">{element.product}</p>
                    <p className="card-text">{element.description}</p>
                    <p className="prod-price">{element.price}  <FontAwesomeIcon icon={faCartPlus} className="prod-carticon" onClick={()=>{this.addToCart(element)}} /></p>
                    
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div>
                </div>
        </div>
      );
    }
  }
  
  export default Products;
  

这里第二种方法：

let items = [];

class Products extends Component {
constructor(props, context) {
 super(props)
 this.state={
 }
}

componentDidMount() {
    items = [];
}

addToCart=(item)=>{
  items.push(item);
  console.log(items)


  localStorage.setItem('cart',JSON.stringify(items))

}

render() {
  
 
  return (
    <div className="container prod-cntr">
      <div className="row prod-row">
        {this.props.products?.map((element) => (
          <div className="col-lg-3 prod-col" key={element.id}>
            <div className="card card-container">
              <img
                src={element.image}
                alt="product img"
                className="prod-img"
              />
              <div className="card-body">
                <p className="card-title">{element.product}</p>
                <p className="card-text">{element.description}</p>
                <p className="prod-price">{element.price}  <FontAwesomeIcon icon={faCartPlus} className="prod-carticon" onClick={()=>{this.addToCart(element)}} /></p>
                
              </div>
            </div>
          </div>
        ))}
      </div>
      <div>
            </div>
    </div>
  );
}

}
  
  export default Products;

cart.js

import React, {Component} from 'react';
import plus from './assets/images/plus.svg';
import minus from './assets/images/minus.svg';

class Cart extends Component {
  constructor(props) {
    super(props);

    this.state = {
      totalItems: 0,
      amount: 0,
      taxes: 0,
      totalAmount: 0
    };
  }

  removeItem = (id) => {
    const cartItems = JSON.parse(localStorage.getItem('cart'));
    const filter = cartItems.filter(item => item.id !== id);
    if (filter) {
        JSON.stringify(localStorage.setItem('cart', filter));
    }
  }

  render() {
    const cartItems = JSON.parse(localStorage.getItem('cart'));
    const totalItems = cartItems?.length || 0;
    const amount =
      cartItems?.reduce((accumulator, object) => {
        return accumulator + object.price;
      }, 0) || 0;
    const taxes = amount * 0.065;
    const totalAmount = amount + taxes;

    return (
      <>
        <div>
          <h2>YOUR CART</h2>
          <p>
            Total Items <span>{this.state.totalItems} </span>
          </p>
          <p>
            Amount <span>{this.state.amount}</span>
          </p>
          <p>
            Total Taxes <span>{this.state.taxes}</span>
          </p>
          <p>
            Total Amount <span>{this.state.totalAmount}</span>
          </p>

          <p>Check Out</p>
        </div>
        <div className="container prod-cntr">
          <div className="row prod-row">
            {cartItems?.map(element => (
              <div className="col-lg-3 prod-col" key={element.id}>
                <div className="card card-container">
                  <img src={element.image} alt="product img" className="prod-img" />
                  <div className="card-body">
                    <p className="card-title">{element.product}</p>
                    <p className="card-text">{element.description}</p>
                    <div className="quantity-container">
                      <img src={minus} className="minus" />{' '}
                      <p className="quantity">
                        QUANTITIY:<span className="qnty-txt"></span>
                      </p>{' '}
                      <img src={plus} className="plus" />
                    </div>
                    <button onClick={() => this.removeItem(element.id)}>Remove From Cart</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div></div>
        </div>
      </>
    );
  }
}

export default Cart;

Answer 2

按钮点击后重新构件将解决您的问题。
我在此处为您的类型问题做了一个示例示例：

https://codesandbox.io/s/stateupdateteTeptest-ectateUpdateTeTest-ectateUpdateTeTept-ectateUpdateTeTept- PB811E

如果您在解决方案方面遇到任何困难。请在此线程上回复。