Question

在这里，当用户单击“购买取消”时，我尝试清除配料，并将购买状态设置为false，然后将配料清洁，但状态似乎为true。甚至没有实时清除订单中的成分，甚至模态窗口cl我该怎么办？

    ///Root Component

            state = {
                    purchasing: false
                }
                purchaseCancleHandler = () => {
            this.setState({purchasing: false
            });
              }
    <OrderSummary
purchaseContinue = {
                    this.purchaseContinuewHandler
                }
                purchaseCancle = {
                    this.purchaseCancleHandler
                } 
/>

//Child component    

     import React, {Component} from 'react'

    import Button from '../../UI/Button/Button'
    import Aux from '../../../hoc/Aux'


        class OrderSummary extends Component {

            componentWillUpdate() {
        //console.log('[OrderSummer] willupdate')

            }
            render ()
            {

                const ingredientSummary =Object.keys(this.props.ingredients)
                .map(igkey => {
                    return <li key={igkey}><span style={{textTransform:'capitalize'}}>{igkey}</span>: {this.props.ingredients[igkey]}</li>

                });


            return(
                <Aux>
                <h3>Your Order</h3>
        <p> A delicious Burger with the following ingredient</p>
        <ul>
        {ingredientSummary}
        </ul>
        <p>Total Price :<strong>{this.props.totalprice.toFixed(2)}</strong></p>
        <p>Continure To Checkout ?</p>
        <Button btnType="Danger" clicked={this.props.purchaseCancle}>CANCEL</Button>
        <Button btnType="Success" clicked={this.props.purchaseContinue}>CONTINUE</Button>
        </Aux>

            );
        }
        }

        export default OrderSummary;

Answer 1

state = {
        purchasing: false
    }
    purchaseCancleHandler = () => {
this.setState({purchasing: false
});
  }

 <Button btnType="Danger" clicked={this.purchaseCancleHandler}>CANCEL</Button>

如果以相同的本地状态声明，则不需要.props。另外，您的函数未正确拼写（缺少“处理程序”）

Answer 2

您要调用在组件本身上定义的方法，而不是传递给组件的prop，因此您需要使用this.purchaseCancleHandler。

state = {
    purchasing: false
}
purchaseCancleHandler = () => {
    this.setState({
        purchasing: false
    });
}

<Button btnType="Danger" clicked={this.purchaseCancleHandler}>CANCEL</Button>

Answer 3

constructor(props) {
  super(props)

  this.state = {
    purchasing: null
  }
}


purchaseCancleHandler = () => {
  this.setState({
    purchasing: false // need set this value difference with initial value
  });
}

// Child component
clicked = () => {
  this.props.purchaseCancle()
}

<Button btnType="Danger" clicked={this.clicked}>CANCEL</Button>

为确保组件将在setState之后呈现，需要为purchasing与初始值之差设置值。

反应setState不更新状态和UI

3 个答案: