Javascript 父状态->；子组件->；onClick不工作时渲染组件
成分流- App.js-保存应用程序状态，呈现shop组件，将addToCart（）函数和产品[[从状态]]传递给shop.js Shop.js-映射产品并呈现产品组件，每个元素都附带一个单击事件 问题- 我的addToCart（）函数不起作用。我在addToCart（）中只有一个简单的console.log（）要测试。我能让它工作的唯一方法是将单击事件附加到map（）函数之外的任何元素。有人能告诉我我做错了什么吗 App.jsJavascript 父状态->；子组件->；onClick不工作时渲染组件,javascript,reactjs,Javascript,Reactjs,成分流- App.js-保存应用程序状态，呈现shop组件，将addToCart（）函数和产品[[从状态]]传递给shop.js Shop.js-映射产品并呈现产品组件，每个元素都附带一个单击事件 问题- 我的addToCart（）函数不起作用。我在addToCart（）中只有一个简单的console.log（）要测试。我能让它工作的唯一方法是将单击事件附加到map（）函数之外的任何元素。有人能告诉我我做错了什么吗 App.js import './App.css'; import { Rout
import './App.css';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Shop from './components/Shop';
import News from './components/News';
import Contact from './components/Contact';
import Cart from './components/Cart';
import Profile from './components/Profile';
import Error from './components/Error';
import Nav from './components/Nav';
class App extends Component {
constructor(props) {
super(props);
this.state = {
products : [
{
id: 1,
productImage: 'someURL',
productName: 'outfit',
productPrice: 25
},
{
id: 2,
productImage: 'someURL',
productName: 'outfit',
productPrice: 25
},
{
id: 3,
productImage: 'someURL',
productName: 'outfit',
productPrice: 25
}
],
cartData : {
items: [],
total: 0
},
posts : [
{
id: 1,
postImage : '',
postTitle : 'Post One',
postBody : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, officiis. Sapiente ut culpa corporis repudiandae quis corrupti impedit a aperiam?'
},
{
id: 2,
postImage : '',
postTitle : 'Post Two',
postBody : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, perspiciatis.'
},
{
id: 3,
postImage : '',
postTitle : 'Post Three',
postBody : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus incidunt saepe repudiandae asperiores corporis!'
},
{
id: 4,
postImage : '',
postTitle : 'Post Four',
postBody : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus incidunt saepe repudiandae asperiores corporis!'
},
{
id: 5,
postImage : '',
postTitle : 'Post Five',
postBody : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus incidunt saepe repudiandae asperiores corporis!'
},
{
id: 6,
postImage : '',
postTitle : 'Post Six',
postBody : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus incidunt saepe repudiandae asperiores corporis!'
}
]
}
}
addToCart = () => {
console.log("added");
}
removeFromCart = (productId) => {
console.log("removed");
}
render() {
return (
<div className="App">
<Nav></Nav>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/shop" render={() => <Shop addToCart={this.addToCart} removeFromCart={this.removeFromCart} products={this.state.products} /> } />
<Route path="/news" component={News} />
<Route path="/contact" component={Contact} />
<Route path="/cart" component={Cart} />
<Route path="/profile" component={Profile} />
<Route component={Error} />
</Switch>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import Product from './Product';
class Shop extends Component {
render() {
return (
<div>
<div className="shop-text">
<div className="custom-line"></div>
<h1>product catalog</h1>
<div className="custom-line"></div>
</div>
<div className="product-grid">
{this.props.products.map(product => {
return (
<Product onClick={this.props.addToCart} key={product.id} image={product.productImage} name={product.productName} price={product.productPrice}></Product>
)
})}
</div>
</div>
)
}
}
export default Shop;
import'/App.css'；
从“react router dom”导入{Route，Switch}；
从“./components/Home”导入Home；
从“./组件/车间”导入车间；
从“/components/News”导入新闻；
从“./components/Contact”导入联系人；
从“./组件/购物车”导入购物车；
从“./components/Profile”导入配置文件；
从“./components/Error”导入错误；
从“./components/Nav”导入导航；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[
{
id:1，
productImage:“someURL”，
产品名称：“装备”，
售价：25
},
{
id:2，
productImage:“someURL”，
产品名称：“装备”，
售价：25
},
{
id:3，
productImage:“someURL”，
产品名称：“装备”，
售价：25
}
],
cartData：{
项目：[]，
总数：0
},
职位：[
{
id:1，
后映像：“”，
postTitle:“Post One”，
博文主体：“我的知识是对精英的尊重。我是官员。我的智慧是不是因为腐败妨碍了开胃酒？”
},
{
id:2，
后映像：“”，
帖子标题：“第二篇帖子”，
博文主体：“奥雷姆·伊普苏姆·多洛尔坐在阿梅特·康塞特图尔·阿迪皮西亚特身边。相似，清晰。”
},
{
id:3，
后映像：“”，
帖子标题：“第三篇帖子”，
博文主体：“Lorem ipsum，dolor sit amet Concertetur Adipiscing Elite.Decedus incident saepe repudiandae asperiores corporis！”
},
{
id:4，
后映像：“”，
postTitle:“Post Four”，
博文主体：“Lorem ipsum，dolor sit amet Concertetur Adipiscing Elite.Decedus incident saepe repudiandae asperiores corporis！”
},
{
id:5，
后映像：“”，
帖子标题：“第五篇”，
博文主体：“Lorem ipsum，dolor sit amet Concertetur Adipiscing Elite.Decedus incident saepe repudiandae asperiores corporis！”
},
{
id:6，
后映像：“”，
帖子标题:"六号帖子",，
博文主体：“Lorem ipsum，dolor sit amet Concertetur Adipiscing Elite.Decedus incident saepe repudiandae asperiores corporis！”
}
]
}
}
addToCart=（）=>{
控制台日志（“添加”）；
}
removeFromCart=（产品ID）=>{
控制台日志（“删除”）；
}
render（）{
返回(
} />
);
}
}
导出默认应用程序；
import './App.css';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Shop from './components/Shop';
import News from './components/News';
import Contact from './components/Contact';
import Cart from './components/Cart';
import Profile from './components/Profile';
import Error from './components/Error';
import Nav from './components/Nav';
class App extends Component {
constructor(props) {
super(props);
this.state = {
products : [
{
id: 1,
productImage: 'someURL',
productName: 'outfit',
productPrice: 25
},
{
id: 2,
productImage: 'someURL',
productName: 'outfit',
productPrice: 25
},
{
id: 3,
productImage: 'someURL',
productName: 'outfit',
productPrice: 25
}
],
cartData : {
items: [],
total: 0
},
posts : [
{
id: 1,
postImage : '',
postTitle : 'Post One',
postBody : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, officiis. Sapiente ut culpa corporis repudiandae quis corrupti impedit a aperiam?'
},
{
id: 2,
postImage : '',
postTitle : 'Post Two',
postBody : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, perspiciatis.'
},
{
id: 3,
postImage : '',
postTitle : 'Post Three',
postBody : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus incidunt saepe repudiandae asperiores corporis!'
},
{
id: 4,
postImage : '',
postTitle : 'Post Four',
postBody : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus incidunt saepe repudiandae asperiores corporis!'
},
{
id: 5,
postImage : '',
postTitle : 'Post Five',
postBody : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus incidunt saepe repudiandae asperiores corporis!'
},
{
id: 6,
postImage : '',
postTitle : 'Post Six',
postBody : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus incidunt saepe repudiandae asperiores corporis!'
}
]
}
}
addToCart = () => {
console.log("added");
}
removeFromCart = (productId) => {
console.log("removed");
}
render() {
return (
<div className="App">
<Nav></Nav>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/shop" render={() => <Shop addToCart={this.addToCart} removeFromCart={this.removeFromCart} products={this.state.products} /> } />
<Route path="/news" component={News} />
<Route path="/contact" component={Contact} />
<Route path="/cart" component={Cart} />
<Route path="/profile" component={Profile} />
<Route component={Error} />
</Switch>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import Product from './Product';
class Shop extends Component {
render() {
return (
<div>
<div className="shop-text">
<div className="custom-line"></div>
<h1>product catalog</h1>
<div className="custom-line"></div>
</div>
<div className="product-grid">
{this.props.products.map(product => {
return (
<Product onClick={this.props.addToCart} key={product.id} image={product.productImage} name={product.productName} price={product.productPrice}></Product>
)
})}
</div>
</div>
)
}
}
export default Shop;
import React，{Component}来自'React'；
从“./产品”导入产品；
类商店扩展组件{
render（）{
返回(
产品目录
{this.props.products.map（product=>{
返回(
)
})}
)
}
}
出口默认商店；
.product{
边框：1px实心#D3；
填充：10px 50px；
背景：bisque；
}
.产品清单{
显示器：flex；
对正内容：空间均匀；
}
你好，世界
类应用程序扩展了React.Component{
onClick（产品）{
警报（JSON.stringify（产品））
}
render（）{
const products=[{name:“Milk”}，{name:“Shoes”}，{name:“Water”}]
返回此.onClick（product）}/>；
}
}
类ShoppingCart扩展了React.Component{
render（）{
返回(
{this.props.products.map（x=>(
))}
);
}
}
类产品扩展了React.Component{
render（）{
返回(
{this.props.name}
this.props.addToCart（this.props.name）}>add
);
}
}
render（，document.getElementById（“根”））；
产品