Question

您不必阅读整个代码，只需阅读editQuantity函数和showOrderItem函数中的注释，特别是showOrderItem函数中的注释我的问题是我认为只是愚蠢，因为我的两个功能都正常工作，

* editQuantity函数应该改变状态，它改变它，我通过添加控制台行进行检查。

* showOrderItem函数假设显示该项目，他也在做这项工作。

我的问题是，我尝试在showOrderItem函数中添加conditional rendering无效，即使我能够改变状态。

请阅读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>
        );
    }
}

Answer 1

而不是

{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项都有，因此您需要使用item来访问该属性。在for loop期间，在更改您写的state时：

order[i].orderQuantityEditing=true;

如果正确，订单将为array，您需要提供索引以访问其中的特定object。

地图函数中的if else语句reactjs

1 个答案: