Question

我通过用Reactjs开发的Web应用程序使用WooCommerce的REST API。但是我需要在加载Web之前从api中提取数据（由于产品显示在Web上，并且如果我没有产品，那么遍历数组的循环应包含从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} />)
});

Answer 1

将您的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>
    );
  }
}

Answer 2

React中的一种常见技术是在componentDidMount生命周期挂钩中获取数据，然后在请求完成后将其置于状态，然后在组件的render方法中使用该状态。 / p>

示例

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>
    );
  }
}

我需要先加载此代码，然后再加载其他代码

2 个答案: