Question

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

我正在调用后端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 fetch example not rendering

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

3 个答案: