您不必阅读整个代码,只需阅读editQuantity
函数和showOrderItem
函数中的注释,尤其是在showOrderItem函数中,我的问题是我认为这很愚蠢,因为我的两个函数都按预期工作,
* editQuantity函数应该改变状态,改变它,我通过添加控制台行来检查。
* showOrderItem函数应该显示项目,他也正在执行该工作。
我的问题是,conditional rendering
即使我能够更改状态,我也会尝试添加无法正常运行的showOrderItem函数。
请阅读showOrderItem函数中的注释,以查看问题所在:
import React from 'react';
export default class ShowOrder extends React.Component{
constructor(props){
super(props);
this.state={
quantityEditing:this.props.orderItems,
}
}
editQuantity(item){
const order=this.state.quantityEditing;
for(var i =0; i<order.length; i++){
if(order[i].item==item){
console.log(order[i].orderQuantityEditing)
order[i].orderQuantityEditing=true;
this.setState({order:this.state.quantityEditing})
console.log(order[i].orderQuantityEditing)
}
}
}
showOrderItem(){
const style = {cursor:'pointer'}
const orderItems=this.state.quantityEditing;
console.log(orderItems)
const orderItem=orderItems.map((item,index)=>
<p>
{orderItems.orderQuantityEditing ? 'some':
<span style={style} onClick={this.editQuantity.bind(this,item.item)}>
//as you can see in here i added conditional rendering, that if orderItems.orderQuantityEditing is true display me some, but that's not working --orderItems.orderQuantityEditing ? 'some'(this part) does not matter how many times i click on property it never display me my string 'some'
{item.quantity}</span>}
<span style={style}> {item.item}</span>
<span style={style}> Q</span>
<span style={style}> N</span>
<span style={style}> X</span>
</p>
);
return orderItem;
}
render(){
return(
<div>
{this.showOrderItem()}
</div>
);
}
}
代替
{orderItems.orderQuantityEditing ?
'some'
:
<span style={style} onClick{this.editQuantity.bind(this,item.item)}>
我认为您需要这样写:
{item.orderQuantityEditing ?
'some'
:
<span style={style} onClick={this.editQuantity.bind(this,item.item)}>
因为你正在使用map
和项目将是各object
的array
,所以你需要用项目来访问该属性。在期间for loop
,更改时state
您写道:
order[i].orderQuantityEditing=true;
如果适当,顺序将是一个,array
并且您需要提供索引以访问特定的索引object
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句