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

Question

我有一个屏幕，其中有一个下拉菜单，该菜单的月度值为，从菜单中选择一个值时，我想根据屏幕上数据的变化来更改组件的状态。

我正在调用后端api，该API给出每个月的响应，并且我以不同数组的形式存储数据，例如monthWiseAmountPayment和monthWiseAmountPaymentMonth但是现在当我从下拉菜单中选择值并尝试过滤我的数据时数组，具体取决于您在下拉菜单中选择的月份，然后更改组件的状态。

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>

我曾打电话给setState onChange方法，但它不会重新呈现该组件，无法理解什么地方出了问题。

Answer 1

您必须在下拉菜单上集成一个eventListener，以等待变更事件。 像这样：

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

我复制了您的代码，并尽我所能使用此代码，该代码可能会起作用，但如果您对此示例不满意，您将了解如何编写代码以按预期工作。

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

后端API是否返回Json对象？ 如果是，则将API调用放入构造函数中，而不要放在componentDidMount函数中。

React-Native获取示例未呈现