javascript - React.JS 上下文 API 问题(渲染问题)
问题描述
我目前正在尝试实施一个电子商务项目。我的问题是关于 Context API 和 Reducer。无法呈现产品的价格和其他详细信息。在购物车组件中
上下文.Js ; 这是我的 Context.js
Reducer.Js这里是 Reducer.js
我的产品组件代码是;
import './Product.css'
import AddBoxIcon from '@material-ui/icons/AddBox';
import { Context } from "./Context"
import React, {useContext} from "react"
function Product({title,price,image,id}) {
const {addtoBasket} = useContext(Context)
/*
function alertUser() {
alert(`${title} added to your card`)
}
function addBasket(){
console.log(title,price)
}
function firedFunctions(){
alertUser()
addBasket()
}
*/
return (
<div className="product">
<div className="product__info">
<img src={image} alt=""></img>
<p className="title">{title}</p>
<div className ="price__add" >
<h4>Price : {price} $</h4>
<div onClick={() => addtoBasket(title, price, image,id)}>
<AddBoxIcon className="btn" />
</div>
</div>
</div>
</div>
)
}
export default Product
我的购物车组件代码是;
import React, {useContext} from 'react'
import './Cart.css'
import {Context} from "./Context"
import Product from "./Product"
function Cart() {
const {basket} = useContext(Context)
console.log(basket) // Expected: Empty Array
return (
<div className="cart">
<div className="cart__left">
<h2>Your Products</h2>
<div>
{basket.map((product) =>(
<h4>{product}</h4>
{/*why product give me just a title of product*/}
))}
</div>
</div>
<div className="cart__right">
<h2>Total</h2>
</div>
</div>
)
}
export default Cart
解决方案
您将三个参数传递给addToBasket
函数,但它只接收一个对象。
您可能需要的是:
<div onClick={() => addtoBasket({title, price, image, id)}>
我刚刚在codesandbox中复制了它,这是正确的答案,看看: https ://codesandbox.io/s/awesome-violet-fr7np?file=/src/index.js
推荐阅读
- java - 将 REST API 的 404 响应更改为 200 空响应
- c++ - 如何使用 C++ 找到 SJF(非抢占式)算法的平均等待时间?
- javascript - React:单击按钮后重新渲染组件
- r - R Shiny - updateSelectizeInput 与观察者的意外行为
- vhdl - 在 VHDL 中将 3D RAM 合成为 BRAM 阵列
- python - 无法覆盖 Odoo 13 上的写入方法
- typescript - why is extends keys T not a valid index
- ios - 如何使用查看更多按钮在表格视图中制作水平集合视图
- sql - Service Broker/数据库镜像传输连接端点发生错误,错误:8474,状态
- python - 如何在 mongo 查询中找到最新记录?