组件生命周期React Js中的变更集状态

Question

I have screen in which there is a drop down menu which is having values as months, on selecting a value from a menu , i want to change the state of the component according to which the data on the screen will change.

I am calling backend api, which is giving response of every month and I am storing the data in the form of different arrays like monthWiseAmountPayment and monthWiseAmountPaymentMonth but now when I am selecting the value from the drop down menu and trying to filter the data in my arrays depending on what month you have selected in the drop down and then change state of the component.

componentDidMount() {
  let monthWiseAmountPayment = [];
  let monthWiseAmountPaymentMonth = [];
  let invPaid = 0;
  let invUnpaid = 0;
  let invOverdue = 0;
  axios.get("http://localhost:5000/dashboard").then(response => {
    let Mrr = response.data.payment.total_count * response.data.payment.total_payment_amount) / 1000;
    this.setState({ monthlyRecurringRevenue: Mrr });

    this.setState({ netRevenue: response.data.payment.total_payment_amount });
    this.setState({
      playerActive: response.data.organization.enrollments[1]
    });
    this.setState({ playerEnded: response.data.organization.enrollments[3] });
    this.setState({
      playerInActive: response.data.organization.enrollments[5]
    });

    response.data.payment.month_wise.map(element => {
      let month = moment(element.month, "YYYY/MM").month();
      let formattedMonth = moment()
        .month(month)
        .format("MMMM")
        .toUpperCase();
      monthWiseAmountPayment.push(element.amount);
      monthWiseAmountPaymentMonth.push(formattedMonth);
      this.setState({ monthWiseAmountPayment: monthWiseAmountPayment });
      this.setState({
        monthWiseAmountPaymentMonth: monthWiseAmountPaymentMonth
      });
    });
  });
}

 handleMonth = (event) => {
    this.setState({selectedMonth:event.target.value})
  }


<select 
      value={this.state.selectedMonth} 
      onChange={this.handleMonth}
      class="custom-select custom-select-md" style = {{position:"absolute",width:"134px",marginRight:"27px",marginLeft:"905px",marginTop:"30px",borderRadius:"3px",backgroundColor:"#d8d5cf" }}>
          <option selected value="">select month</option>
          <option value="January">January</option>
          <option value="February">February</option>
          <option value="March">March</option>
          <option value="April">April</option>
          <option value="May">May</option>
          <option value="June">June</option>
          <option value="July">July</option>
          <option value="August">August</option>
          <option value="September">September</option>
          <option value="October">October</option>
          <option value="November">November</option>
          <option value="December">December</option>
      </select>

I had called setState onChange method but it is not re rendering the component not able to understand what is wrong.

Answer 1

You have to integrate an eventListener on your dropdown waiting for on change events. Something like this:

render() {
  return(
    <div>
      <select onChange={this.handleChange}>
        ...
      </select>
    </div>
  )
)}
handleChange(event){
  const selectedItem = event.target.value;
  // Change your state here:
  this.setState({selection: selectedItem});
}

Answer 2

I copy your code and did the best I could with this code it will probably work but if not you with this example you will understand how to write your code to work as you expect.

getInfoDashBoard = () => {

let monthWiseAmountPayment = [];
let monthWiseAmountPaymentMonth = [];
let invPaid = 0;
let invUnpaid = 0;
let invOverdue = 0;
axios.get("http://localhost:5000/dashboard").then(response => {
let Mrr = response.data.payment.total_count * response.data.payment.total_payment_amount) / 1000;   

response.data.payment.month_wise.map(element => {
  let month = moment(element.month, "YYYY/MM").month();
  let formattedMonth = moment()
    .month(month)
    .format("MMMM")
    .toUpperCase();
  monthWiseAmountPayment.push(element.amount);
  monthWiseAmountPaymentMonth.push(formattedMonth);   
});

 this.setState({...this.state, monthlyRecurringRevenue: Mrr, 
    etRevenue: response.data.payment.total_payment_amount
    ,playerActive: response.data.organization.enrollments[1]
    ,playerEnded: response.data.organization.enrollments[3]
    ,playerInActive: response.data.organization.enrollments[5]
    ,monthWiseAmountPayment: monthWiseAmountPayment
    ,monthWiseAmountPaymentMonth: monthWiseAmountPaymentMonth
    ,monthWiseAmountPaymentMonthCopy: monthWiseAmountPaymentMonth
     });
});
}

componentDidMount() {
  this.getInfoDashBoard();
}

   handleMonth = (event) => {
   let month = event.target.value;     
   let monthWiseAmountPaymentMonth_ = [];
   let month = moment(month, "YYYY/MM").month();
   let formattedMonth = moment()
    .month(month)
    .format("MMMM")
    .toUpperCase();    

  monthWiseAmountPaymentMonth_ = monthWiseAmountPaymentMonthCopy.filter((item) => {
                                     if(item === formattedMonth) 
                                      {
                                          return item;
                                      }
                                    }
                                 );

     this.setState({selectedMonth: month, 
monthWiseAmountPaymentMonth: monthWiseAmountPaymentMonth_})
}


<select 
    value={this.state.selectedMonth} 
    onChange={(e) => {this.handleMonth(e)}
    class="custom-select custom-select-md" 
    style= {{position:"absolute",width:"134px",  
       marginRight:"27px",marginLeft:"905px",
       marginTop:"30px",borderRadius:"3px",
       backgroundColor:"#d8d5cf" }}>
      <option selected value="">select month</option>
      <option value="January">January</option>
      <option value="February">February</option>
      <option value="March">March</option>
      <option value="April">April</option>
      <option value="May">May</option>
      <option value="June">June</option>
      <option value="July">July</option>
      <option value="August">August</option>
      <option value="September">September</option>
      <option value="October">October</option>
      <option value="November">November</option>
      <option value="December">December</option>
  </select>

Answer 3

Is the backend API returning Json object? If yes , then put the API call in the constructor rather than in componentDidMount function.

React-Native fetch example not rendering