Мне нужно дважды нажать на кнопку, чтобы отобразить компонент

Question

В этом компоненте реакции я хочу отобразить данные на экране, когда пользователь нажимает кнопку «Отправить», но для отображения данных необходимо дважды нажать кнопку.

Ниже приведен фрагмент кода:

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>
    );
  }
}

как я могу решить эту проблему?

Answer 1

В функции onClick для этой кнопки просто сохраните флаг в состоянии компонента [или локально для вашего класса], указывающий, была ли нажата кнопка, и если это так, выполните логику рендеринга И снова сбросьте флаг

Answer 2

Легко понять, почему, по сути, вы устанавливаете значение в своем штате напрямую, вы должны сделать это, используя setState() , как указано в документации

Ваш код:

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

но должно быть:

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

еще одна вещь, которую я заметил, это то, что вы хотите установить состояние после того, как вы установили состояние, тогда вы можете использовать обратный вызов из setState()

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

и, наконец, мне лично не нравятся эти 2 setState, было бы проще сделать все это в одном месте:

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