मैं एक साधारण ऑर्डर सिस्टम बनाने की कोशिश कर रहा हूं, जब उपयोगकर्ता मात्रा का चयन करता है और "ऑर्डर में जोड़ें" पर क्लिक करता है, तो चयनित डिश की जानकारी "आपका ऑर्डर" क्षेत्र में दिखाई जाएगी (देखने के लिए "रीफ्रेश ऑर्डर" पर क्लिक करें)। मैं जो कर रहा हूं वह डिश जानकारी (मेनूएडिट घटक से) को एक सूची में (ग्राहक ऑर्डर घटक में) डालने के लिए है।

मेरा प्रश्न इस प्रकार है: मैं ऑर्डर करने के लिए "मू गू गाय पैन" मात्रा: 1 जोड़ता हूं, इसे सूची में डाला जाएगा, और फिर मैं "तेरियाकी चिकन" मात्रा: 2 जोड़ता हूं, इसे सूची में डाला जाएगा, और मैं फिर से "मू गू गाय पैन" जोड़ें लेकिन मात्रा: 3 ऑर्डर करने के लिए, इसे सूची में डाला जाएगा। यूआईडी एक टाइमस्टैम्प है जब उपयोगकर्ता "ऑर्डर में जोड़ें" पर क्लिक करता है। सूची ठीक काम कर रही है (मैं गहरी प्रतिलिपि के लिए लॉश का उपयोग करता हूं), लेकिन जब सूची के सभी आइटम प्रस्तुत करना अच्छा नहीं होता है। मैं इसे हल करने का एक उचित तरीका नहीं सोच सकता। आपके अनुरोध के अनुसार मैं और जानकारी प्रदान करने को तैयार हूं। आपके समय और मदद के लिए धन्यवाद।

मैंने चरण प्रदर्शित करने के लिए एक GIF बनाया है और आप कंसोल में सूची को बदलते हुए देख सकते हैं। लिंक: https://github.com/Dungyichao/COVID19_Reporting_Web/blob/ Master/img/EggrollChenOrderSC.gif

उपयोगकर्ता "ऑर्डर में जोड़ें" पर क्लिक करें, पहला और दूसरा चरण अच्छा कर रहा है। यहां छवि विवरण दर्ज करें

कार्ट (आपका ऑर्डर) के रेंडर स्टेप्स, पहला और दूसरा स्टेप अच्छा कर रहे हैं। यहां छवि विवरण दर्ज करें

निम्नलिखित सूची है जो प्रतिपादन के लिए घटक को पास की जाती है। ध्यान दें कि मात्रा अलग है, और यह सही सूची है जो मुझे चाहिए और पहले से ही कार्टलिस्ट घटकों में पारित हो गई है। यहां छवि विवरण दर्ज करें

मेरे कोड और घटक संरचना इस प्रकार है यहां छवि विवरण दर्ज करें

आदेश.जेएस

export default class CustomerOrder extends Component {

constructor(props) {

    super(props);

    this.firebase = props.firebase;
    this.sendinfo_toCart_handle = this.sendinfo_toCart_handle.bind(this);
    this.Cart_new_item_arrive = this.Cart_new_item_arrive.bind(this);
    this.remove_item = this.remove_item.bind(this);

    this.state = {
        Cart_data: [],
        Cart_new_item: '',
    }

    this.refresh_cart_handle = this.refresh_cart_handle.bind(this);
}

remove_item(e){
    console.log("Remove item uid: ", e);
}

refresh_cart_handle(){
    let {Cart_data} = this.state;
    console.log("Current Cart Data: ", Cart_data);
}

Cart_new_item_arrive(e){
    //console.log("Cart_new_item_arrive: ", e);
    this.setState({Cart_new_item: e}, () => {
        //after setstate
        this.sendinfo_toCart_handle();
    }); 
    
    
}

sendinfo_toCart_handle(){
    let {Cart_new_item, Cart_data} = this.state;
    let deepcopy_list = _.cloneDeep(Cart_data);
    deepcopy_list.push(Cart_new_item);
    this.setState({Cart_data: deepcopy_list});
}


render() {

    let {Cart_data} = this.state;

    return (
        <div style={order_style}>

            <div style={{
                
            }}>
                <h3>Menu</h3>
                <MenuEdit firebase={this.firebase} CartAdd={this.Cart_new_item_arrive} />

            </div>

            <div style={{
                
            }}>
                <h3>Your Order</h3>
                <Cart data_array={Cart_data} remove_item={this.remove_item} />   {/*remove_item={this.remove_item}*/}
                <Button onClick={this.refresh_cart_handle}>Refresh Order</Button>
            </div>

        </div>
    );

}

}

Cart.js

export default class Cart extends Component {

constructor(props) {

    super(props);

}

render() {
    return (
        <div>
            <div>
                <Scroll>
                    
                        <CartList data_array={this.props.data_array} remove_item={this.props.remove_item} />  {/*remove_item={this.props.remove_item}*/}
                    
                </Scroll>
            </div>
            <div>
                <div><Button>Refresh</Button></div>
                <div>
                    <Button>Cancel</Button> {'  '}
                    <Button>Place Order</Button>
                </div>
                
            </div>


        </div>
    );
}

}

CartList.js

export default class CartList extends Component {

constructor(props) {

    super(props);

}

render(){

    let display_data = this.props.data_array;
    let null_page = [];
    console.log("Data in CartList.js: ", display_data)

    if(display_data[0]){
        return(       
            display_data.map(
                (cart_item, idx) => {
                    //console.log("In Map", idx, ' Item: ', cart_item);
                    return(
                        <div>
                            <CartItem key={idx} u_key={idx + 1} 
                            Cart_item_info={cart_item} 
                            remove_item={this.props.remove_item} /> {/*remove_item={this.props.remove_item}*/}
                        </div>
                    );
                }
            )
        )
    }
    else{
        return(
            <div>
                <p>Add Your Favorite Dishes to Here</p>
            </div>
        );
    }

}

}

CartItem.js (जो सूची में प्रत्येक आइटम को प्रस्तुत करता है)

export default class CartItem extends Component {

constructor(props) {

    super(props);
    this.state = {
        show_toggle: true,
        cart_item_info: this.props.Cart_item_info,
        u_key: this.props.u_key,
        
    }
    //cart_item_info: this.props.Cart_item_info,
    this.remove_item_handle = this.remove_item_handle.bind(this);
}

remove_item_handle(){
    let {cart_item_info} = this.state;
    this.props.remove_item(cart_item_info.uid);
}

render() {
    let {cart_item_info, u_key} = this.state;
    //console.log("Return CartItem")
    return (
        <div key={u_key} >
            <Accordion>
                <Card>
                    <Accordion.Toggle as={Card.Header} eventKey="0">
                        <div style={item_style}>                                                          
                            <div style={{flex: '1'}}>{u_key}.</div>
                            <div style={{flex: '7'}}> {cart_item_info.dish_name}</div>
                            <div style={{flex: '2'}}>X {cart_item_info.qty}</div>
                            <div style={{flex: '2'}}>${cart_item_info.Tprice}</div>                                                       
                        </div>
                       
                    </Accordion.Toggle>
                    <Accordion.Collapse eventKey="0">
                        <Card.Body>
                            <Button onClick={this.remove_item_handle} >Remove</Button>
                        </Card.Body>
                    </Accordion.Collapse>
                </Card>                  
            </Accordion>
        </div>
    );
}

}

1
Dung-Yi 16 सितंबर 2020, 07:13

2 जवाब

सबसे बढ़िया उत्तर

अपनी CartItem.js फ़ाइल को अपडेट करें। यह कार्यात्मक घटक होना चाहिए।

const CartItems = (props) => {

console.log(props.Cart_item_info);

return (
<div key={props.u_key} >
<Accordion>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="0">
<div>
<div style={{ flex: '1' }}>{props.u_key}.</div>
<div style={{ flex: '7' }}> {props.Cart_item_info.dish_name}</div>
<div style={{ flex: '2' }}>X {props.Cart_item_info.qty}</div>
<div style={{ flex: '2' }}>${props.Cart_item_info.Tprice}</div>
</div>

</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
<div>No</div>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
}
1
deepak 16 सितंबर 2020, 10:05

मैं अंत में समस्या का मूल कारण ढूंढता हूं जिसे मैंने इसे प्रश्न में प्रकट नहीं किया क्योंकि मुझे नहीं लगता कि इससे कोई समस्या होगी

enter image description here

समस्या मेनूइटम घटक (मेनू आइटम जिसे उपयोगकर्ता ऑर्डर में जोड़ें क्लिक कर सकता है) से है। सही तरीका यह है कि सभी डेटा (जो ऑर्डर.जेएस में सूची में डालने जा रहा है) को मेनूइटम घटक की स्थिति में रखें, जब भी यह पहले से ही डाला जा चुका हो। ऐसा करने से आप किसी भी मूल डेटा को दोबारा भेजे जाने से रोक सकते हैं।

साथ ही दीपक के साथ चैट रूम में, वह कुछ निम्नलिखित सुझाव देते हैं:

  1. जब आप केवल कुछ दिखाना चाहते हैं और कोई राज्य प्रबंधन कार्यात्मक घटक पसंद नहीं करते हैं।
  2. मुख्य सहायता सूची में आइटम परिवर्तन की पहचान करने के लिए प्रतिक्रिया करती है।
0
Dung-Yi 17 सितंबर 2020, 22:26