我需要在按钮上单击两次以显示组件

Question

In this react component, I want to render the data to the screen when the 'Submit' button is clicked by the user, but the button has to be pressed twice for the data to display.

Below is my code snippet:

class Invoice extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [], isLoaded: false, transId: "" ,flag:true,errorFlag:false,show:false,displayContent:"",invoice:"",invoiceXmlBody:"",invoiceResult:"",invoiceTransId:"",invoiceResultFlag:false,invoicedisplayFlag:false};

  }
handleChangeInvoice(e) {
    console.log("inside handleChangeInvoice");
    let invoiceXml = e.target.value;
    if (invoiceXml !== undefined) {
      this.setState({ invoiceXmlBody: e.target.value });
    }
  }

  handleSubmitInvoiceXml =e=>{
   console.log("*******************inside handleSubmitInvoiceXml***************");
   let url = "http://localhost:8080/postInvoiceXml";
   fetch(url, {
    method: "POST",
    body: JSON.stringify(this.state.invoiceXmlBody),
     })
     .then(res => res.json()).then(data=>
       {
    this.setState({items:data});
    console.log(this.state.items[0].status);
     console.log("response========="+JSON.stringify(data));
      if(data===undefined){
          this.state.invoiceResultFlag=true;
    }
    else{
      this.state.invoicedisplayFlag=true;
          }
    }
 ) }

  render() {
    console.log("---------------------------"+this.state.invoicedisplayFlag);
    return (
      <div className="App">
        <br/>
          <label className="lable" style={{marginRight:19}}>
              InvoiceXml:
              <input
                type="text"
                name="invoiceXml" placeholder="Enter invoice xml"
                onBlur={this.handleChangeInvoice.bind(this)}  style={{marginLeft:15}} />

            </label><br/><br/>
             <input type="button" onClick={this.handleSubmitInvoiceXml} name="Submit" value="Submit" className="submitButton" />          
            <br/>
            <br/><br/>

            <div  className={this.state.invoicedisplayFlag?"showDisplay":"hide"}>
              {this.state.items.map((item,i) => (
                <div>
                <h2>Invoice No is: {item.invoiceNo}</h2>
                 <h2>Transaction id is: {item.transId}</h2>
                  <h2>Status: { item.status ? 'Success' : 'Failed' }</h2>
                 </div>
                       ))}
               </div>
       </div>
    );
  }
}

how can I resolve this?

Answer 1

it is easy to find why, basically you are setting a value in your state directly, you should do it using setState() like the documentation says

so your code is:

if(data===undefined){
    this.state.invoiceResultFlag=true;
}
else {
    this.state.invoicedisplayFlag=true;
}

but it should be:

if(data===undefined){
    this.setState({invoiceResultFlag: true})
}
else {
    this.setState({invoicedisplayFlag: true});
}

another thing that I noticed is that you want to set an state after you set an state, then you can use the callback from setState()

this.setState({items:data}, ()=>{
    if(data===undefined){
        this.setState({invoiceResultFlag: true})
    }
    else {
        this.setState({invoicedisplayFlag: true});
    }
});

and finally, I dont personally like those 2 setState, it would be easier to do it everything in one place:

this.setState({
    items:data,
    invoiceResultFlag: !data,
    invoicedisplayFlag: !!data,
});

Answer 2

在该按钮的 onClick 函数中，只需在组件状态中保存一个标志 [或本地到您的类] 指示按钮是否被单击，如果是，则执行渲染逻辑并再次重置该标志

Answer 3

I ran into a similar problem where I was using onBlur to update the state of an input value.

I found changing onClick to onMouseDown to work

<input className="input-form" onBlur={(e)=>{this.setState({field1:e.target.value})}/>

<button className="submit-button" onMouseDown={()=>{this.submitForm()}}>Submit</button>