如何从组件A到组件B获得useState的值

Question

作为一个整体，我对JS和React相对陌生，我深入研究了React，并开始使用Django后端制作一些项目。我在react、的ProductList组件中有一个项目列表

我有一个状态cart，我想从ProductList访问Cart组件。其理念是，当单击"添加到购物车"按钮时，该项目将添加到对象的购物车阵列中如何将价值添加到购物车组件？此外，如果有更好的方法来做到这一点，一个建议将是很好的。

ProductList组件

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import './css/ProductList.css'
import { Link } from 'react-router-dom'
// import { CartContext } from './CartContext'

function ProductList(props) {
const [products, setProducts] = useState([])
const [cart, setItem] = useState([])

useEffect(() => {
axios.get('http://localhost:8000/shop')
.then(res => {
setProducts(res.data)
})
.catch(error => {
console.log(error)
})
}, [])
const addToCart = (item) =>{
setItem([...cart, item])
}
// const { item } = useContext(CartContext)
return (
<>
{
products.map((product) => (
<div className="Box" key={product.id}>
{product.items.map((item) => (
<div key={item.id} >
<img src={item.attachment.attachment} alt={product.name} />
<h5>{item.color}</h5>
<button className="add" onClick={()=>{addToCart(item)}}>Add to cart</button>
</div>
))}

<Link to={`/products/${product.id}`}><h4>{product.name}</h4></Link>
<p>{product.description}</p>
</div>
))
}
</>
)
}
export default ProductList

购物车组件

import React from 'react'

function Cart(props) {
return (
<div>
</div>
)
}
export default Cart

Answer 1

评论中已经有了不错的意见，所以我实际上只是简单地编写了代码。

子组件(Cart(应避免更改父组件(ProductList(的状态。因此，在父组件中，添加product的方法作为props传递。之后，子组件调用该方法来添加它。

上述解决方案是Rajdeep Debnath在评论中所说的。

---

产品列表

export default function ProductList() {
//...
return (
<div>
{products.map((product) => {
return (
<Cart key={product.id} product={product} addToCart={(product) => addToCart(product)} />
);
})}
</div>
);
}

---

推车

export default function Cart({ product, addToCart }) {
return (
<div onClick={() => addToCart(product)}>
<div>{product.id}</div>
<div>{product.content}</div>
</div>
);
}

Answer 2

解决问题的上下文方式

但请注意，您仅使用上下文->如果您只想避免将一些道具传递到多个级别，那么组件组合通常是比上下文更简单的解决方案

// cart.context.js
import * as React from "react";
const CartContext = React.createContext();
function CartProvider({ children }) {
const [cart, setCart] = React.useState([]);

const contextValue = {
cart: cart,
addToCart: (product) => {
setCart(c => [...c, product])
}
// add any functions that update the cart here like addToCart
}
return (
<CartContext.Provider value={contextValue}>{children}</CartContext.Provider>
);
}

// Below is a simple hook that gives you the `contextValue` above
function useCart() {
const context = React.useContext(CartContext);
if (context === undefined) {
throw new Error("useCart must be used within a CartProvider");
}
return context;
}
export { CartProvider, useCart };

然后用下面的包裹Cart和ProductList的最近父母

假设它是App，但尝试包装最近的父

import { CartProvider } from '...cart.context.js';
function App() {
return (
<CartProvider>
// ... App component return goes here (wrap)  
</CartProvider>
)
}

现在，您可以在所有子组件中使用useCart，如

import { useCart } from '...cart.context.js';
export default function ProductList() {
const { addToCart }  = useCart();
return (
<div>
{products.map((product) => {
return (
<Cart key={product.id} product={product} addToCart={(product) => addToCart(product)} />
);
})}
</div>
);
}

import React from 'react'
import { useCart } from '...cart.context.js';
function Cart(props) {
const { cart }  = useCart();
return (
<div>
</div>
)
}
export default Cart