Реагировать js метод управления componentDidUpdate () - PullRequest
Новая
       4

Реагировать js метод управления componentDidUpdate ()

0 голосов
/ 01 апреля 2020

Я хочу изменить параметр API с помощью функции click и отобразить новые данные. Когда я запускаю componentDidUpdate с помощью прослушивателя событий onclick, данные API менялись первыми и работали нормально для первого клика. Но при нажатии во второй раз вызов API завершился полностью. Параметр currentPage присваивается значениям this.state.count и this this.state.count, которые увеличиваются при щелчке.

Мой код ниже: 

import React from 'react';    

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {

      products: [],
      count: 1,      

    };
  }

  componentDidMount() {    
    this.ProductList();  
  }
  componentDidUpdate() {  
    let change = document.getElementById("change");
    change.addEventListener("click",(e)=>{
      this.changeParams();
      this.ProductList();  
    })
  }
  changeParams = (e) =>{
    this.setState({count: this.state.count + 1})
  }       

  ProductList() {
    var myHeaders = new Headers();
    myHeaders.append("Cookie", "PHPSESSID=822cu5ctftcpo8f98ehklem4k9");

    var requestOptions = {
      method: 'GET',
      headers: myHeaders,
      redirect: 'follow'
    };
    fetch("http://192.168.31.236/magento/rest/V1/products?searchCriteria[filterGroups][0][filters][0][field]=category_id& searchCriteria[filterGroups][0][filters][0][value]=2& searchCriteria[filterGroups][0][filters][0][conditionType]=eq&searchCriteria[sortOrders][0][field]=price& searchCriteria[sortOrders][0][direction]=ASC& searchCriteria[pageSize]=20& searchCriteria[currentPage]="+this.state.count, requestOptions)
      .then(response => response.text())
      .then(result => this.setState({products:result}),)
      .catch(error => console.log('error', error));
    }
  render() {

    const productsList = () =>{
        let pro = [];
          if(typeof this.state.products === 'string') {
            pro = JSON.parse(this.state.products)
            console.log(pro)
          }else{
            pro = []
          }
          if(pro.items && typeof pro.items !== "undefined"){
              return pro.items.map((item, i) => (
                <div>
                  <h1>{ item.name }</h1>
                </div>
              ));
          }           
    }
    return(     
      <div>
        {productsList()}
        <button id="change">Change</button>
      </div>
    );
  }


}

export default App;

1 Ответ

1 голос
/ 01 апреля 2020

Вместо того, чтобы вручную подключать прослушиватели событий, сделайте это через React. В большинстве случаев вам не следует выполнять операции DOM напрямую. 

class App extends React.Component {
  // ...

  /* You don't need this
  componentDidUpdate() {  
  }
  */

  handleChangeClick = () => {
    this.changeParams();
    this.ProductList();  
  }

  // ...

  render() {
    // ...
    return(     
      <div>
        {productsList()}
        <button id="change" onClick={this.handleChangeClick}>Change</button>
      </div>
    );
  }
}

Причина, по которой ваш подход не работает, заключается в том, что React может создавать и уничтожать элементы DOM так, как вы этого не ожидаете. поэтому трудно убедиться, что вы вручную подключили и отсоединили прослушиватели событий к нужным элементам.

...