Javascript 如何在react中增加和查看购物车项目？_Javascript_Reactjs

Javascript 如何在react中增加和查看购物车项目？

javascript reactjs

Javascript 如何在react中增加和查看购物车项目？,javascript,reactjs,Javascript,Reactjs,你好，请我是新的反应，并试图建立一个结帐系统通过假商店API，用户可以查看购物车中的项目，增加项目的数量，减少项目的数量和清除购物车。到目前为止，我已经呈现在主页上的产品。但我不知道如何增加购物车中的物品和查看购物车中的物品。我知道这可能是一个简单的任务，但我不知道如何继续，我正在努力避免视频教程。请就如何进行提供任何建议，我们将不胜感激 import React from 'react' import './App.css'; import axios from 'axios' clas

你好，请我是新的反应，并试图建立一个结帐系统通过假商店API，用户可以查看购物车中的项目，增加项目的数量，减少项目的数量和清除购物车。到目前为止，我已经呈现在主页上的产品。但我不知道如何增加购物车中的物品和查看购物车中的物品。我知道这可能是一个简单的任务，但我不知道如何继续，我正在努力避免视频教程。请就如何进行提供任何建议，我们将不胜感激


import React from 'react'
import './App.css';
import axios from 'axios'


class App extends React.Component {
  constructor(props) {
      super(props)
      
      this.state = {
          products: [],
          count: 0 
      }
  }
  componentDidMount(){
 axios.get('https://fakestoreapi.com/products')
 .then(response =>{
     const products = response.data
     this.setState({products})
     console.log(products)
 } )
 
 .catch(err=> console.log(err))
  }

  incrementCart = () =>{
 this.setState({count: this.state.count + 1})
  }   
  
  
  render() {
      return (
          <div id="container">
         {
        this.state.products.map(product=> 
             <div id="product" key={product.id}>
              <img className="img" src={product.image} alt="product-store"/>
              <h1>{product.category}</h1>
               <h4>{product.price}</h4>
               <button onClick={this.incrementCart}>Add To Cart</button>
             </div>
            
         )    
         }
         
          </div>

      )
  }
}
export default App


从“React”导入React
导入“/App.css”；
从“axios”导入axios
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
产品：[]，
计数：0
}
}
componentDidMount（）{
axios.get（）https://fakestoreapi.com/products')
。然后（响应=>{
const products=response.data
this.setState（{products}）
console.log（产品）
} )
.catch（err=>console.log（err））
}
递增购物车=（）=>{
this.setState（{count:this.state.count+1}）
}   
render（）{
返回(
{
this.state.products.map（product=>
{product.category}
{产品价格}
添加到购物车
)    
}
)
}
}
导出默认应用程序

与您能够在主页上呈现产品的方式相同，您应该能够对购物车执行相同的操作，但仅更改其呈现方式（布局/模板/组件…）和计数您做错了什么？它实际上是递增的吗？如果是这样的话，你只需要在正确的地方渲染它（你的购物车/导航栏）

我认为这与您现在已经完成的几乎相同，但是您只需要在您的购物车组件上呈现数据就可以了？然后有办法显示/隐藏购物车组件吗

编辑：

我明白了，我想你是在组件状态下递增，但你没有全局保存该状态，所以你不能在另一个组件/页面上或页面刷新后访问它

我认为您有几个选项，其中之一是向和端点发送GET/POST请求，将产品ID添加到购物车中，在其他页面/组件中，您必须发送GET/POST请求，而不是保存，将从购物车中检索数据（产品ID与用户保持连接（对于ex））您以前保存的

您还可以使用“localStorage”保存购物车项目/产品数据：

我想还有其他选择，但对我来说，这些似乎是最简单、最符合逻辑的解决方案

我认为这与您现在已经完成的几乎相同，但是您只需要在您的购物车组件上呈现数据就可以了？然后有办法显示/隐藏购物车组件吗

编辑：

我明白了，我想你是在组件状态下递增，但你没有全局保存该状态，所以你不能在另一个组件/页面上或页面刷新后访问它

您还可以使用“localStorage”保存购物车项目/产品数据：

我想还有其他选择，但对我来说，这些似乎是最简单、最符合逻辑的解决方案

最终输出：

import React from "react";
import "./styles.css";
import axios from "axios";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      products: [],
      count: 0,
      cart: []
    };
  }
  componentDidMount() {
    axios
      .get("https://fakestoreapi.com/products")
      .then((response) => {
        const products = response.data;
        this.setState({ products });
        console.log(products);
      })

      .catch((err) => console.log(err));
  }

  addtoCart = (product) => {
    this.setState({
      count: this.state.count + 1,
      cart: this.state.cart.concat(product)
    });
    console.log(this.state.cart);
  };

  render() {
    return (
      <div>
        <div id="container">
          {this.state.products.length ? (
            this.state.products.map((product) => (
              <div className="productContainer" id="product" key={product.id}>
                <img className="img" src={product.image} alt="product-store" />
                <h1>{product.category}</h1>
                <h4>{product.price}</h4>
                <button onClick={() => this.addtoCart(product)}>
                  Add To Cart
                </button>
              </div>
            ))
          ) : (
            <div className="productContainer">
              <p>Loading</p>
            </div>
          )}
        </div>
        {this.state.products.length > 0 && (
          <div className="cart">
            <p>{this.state.count}</p>
            {this.state.cart?.map((item) => (
              <div className="itemBox">
                <div style={{ marginLeft: 5 }}>
                  <img className="cartImage" src={item.image} />
                </div>
                <div> {item?.title.substr(0, 10) + "..."}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }
}
export default App;

要在单击“添加到购物车”按钮时将产品存储在购物车中，我们使用以下

addtoCart（）

函数，该函数将产品对象作为参数

单击按钮时，将调用此函数，在此函数中，我们将增加购物车项目计数，并在我们的

购物车

数组中添加提供的

产品

对象

addtoCart = (product) => {
    this.setState({
      count: this.state.count + 1,
      cart: this.state.cart.concat(product)
    });
    console.log(this.state.cart);
  };

现在，我们可以使用这两种状态（

count

和

cart

）在以下代码的帮助下，使用

map

方法呈现购物车项目：

{this.state.products.length > 0 && (
          <div className="cart">
            <p>{this.state.count}</p>
            {this.state.cart?.map((item) => (
              <div className="itemBox">
                <div style={{ marginLeft: 5 }}>
                  <img className="cartImage" src={item.image} />
                </div>
                <div> {item?.title.substr(0, 10) + "..."}</div>
              </div>
            ))}
          </div>
        )}

{this.state.products.length>0&&(
{this.state.count}
{this.state.cart？.map（（项目）=>(
{item？.title.substr（0，10）+“…”}
))}
)}

最终完成的源代码：

import React from "react";
import "./styles.css";
import axios from "axios";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      products: [],
      count: 0,
      cart: []
    };
  }
  componentDidMount() {
    axios
      .get("https://fakestoreapi.com/products")
      .then((response) => {
        const products = response.data;
        this.setState({ products });
        console.log(products);
      })

      .catch((err) => console.log(err));
  }

  addtoCart = (product) => {
    this.setState({
      count: this.state.count + 1,
      cart: this.state.cart.concat(product)
    });
    console.log(this.state.cart);
  };

  render() {
    return (
      <div>
        <div id="container">
          {this.state.products.length ? (
            this.state.products.map((product) => (
              <div className="productContainer" id="product" key={product.id}>
                <img className="img" src={product.image} alt="product-store" />
                <h1>{product.category}</h1>
                <h4>{product.price}</h4>
                <button onClick={() => this.addtoCart(product)}>
                  Add To Cart
                </button>
              </div>
            ))
          ) : (
            <div className="productContainer">
              <p>Loading</p>
            </div>
          )}
        </div>
        {this.state.products.length > 0 && (
          <div className="cart">
            <p>{this.state.count}</p>
            {this.state.cart?.map((item) => (
              <div className="itemBox">
                <div style={{ marginLeft: 5 }}>
                  <img className="cartImage" src={item.image} />
                </div>
                <div> {item?.title.substr(0, 10) + "..."}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }
}
export default App;

从“React”导入React；
导入“/styles.css”；
从“axios”导入axios；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
产品：[]，
计数：0，
购物车：[]
};
}
componentDidMount（）{
axios
.get（“https://fakestoreapi.com/products")
。然后（（响应）=>{
const products=response.data；
this.setState（{products}）；
控制台日志（产品）；
})
.catch（（err）=>console.log（err））；
}
addtoCart=（产品）=>{
这是我的国家({
计数：this.state.count+1，
购物车：this.state.cart.concat（产品）
});
console.log（this.state.cart）；
};
render（）{
返回(
{this.state.products.length(
this.state.products.map（（产品）=>(
{product.category}
{产品价格}
此.addtoCart（产品）}>
添加到购物车