Мне нужно загрузить этот код перед загрузкой другого кода - PullRequest
Новая
       10

Мне нужно загрузить этот код перед загрузкой другого кода

0 голосов
/ 12 апреля 2019

Я использую REST API WooCommerce через веб-приложение, разработанное с помощью Reactjs.Но мне нужно извлечь данные из API до загрузки Интернета (так как продукты отображаются в Интернете, и если у меня нет продуктов, цикл, который проходит через массив, который должен содержать продукты, извлеченные из REST API

  WooCommerce.getAsync('products').then(function(result) {
    let a = JSON.parse(result.toJSON().body);
    a.forEach((element, index) => {
      console.log(element.name + " | " + element.regular_price);
    });
    info = a;
    return a;
  });

info.forEach((element, index) => {
    console.log(element);
    resultado.push(<Producto index = {index} pasarCarrito = {func} 
    image={element.images[0].src} title={element.name } prize= 
    {element.regular_price} description={element.description} />)
});

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Обычный метод в React - получить данные в хуке жизненного цикла componentDidMount, а затем перевести данные в состояние после завершения запроса и использовать этот фрагмент состояния в методе рендеринга компонента.

Пример 

class MyComponent extends React.Component {
  state = {
    products: []
  };

  componentDidMount() {
    WooCommerce.getAsync("products").then(function(result) {
      const products = result.toJSON().body;
      this.setState({ products });
    });
  }

  render() {
    return (
      <div>
        {this.state.products.map((element, id) => (
          <div key={index}>
            {element.name} | {element.regular_price}
          </div>
        ))}
      </div>
    );
  }
}
0 голосов
/ 12 апреля 2019

Поместите вызовы API в метод жизненного цикла:

componentDidMount ()

пример: 

export default class UserList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {person: []};
  }

  componentDidMount() {
    this.UserList();
  }

  UserList() {
    $.getJSON('https://randomuser.me/api/')
      .then(({ results }) => this.setState({ person: results }));
  }

  render() {
    const persons = this.state.person.map((item, i) => (
      <div>
        <h1>{ item.name.first }</h1>
        <span>{ item.cell }, { item.email }</span>
      </div>
    ));

    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">{ persons }</div>
      </div>
    );
  }
}
...