Реагировать данные API рендеринга на стороне клиента

Question

Реагировать данные API рендеринга на стороне клиента

0

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

при загрузке страницы api загружает некоторые исходные данные в виде вложенного объекта

чем компонент должен анализировать этот дочерний узел результатов, который имеет около 10 элементов

var Panel = ReactBootstrap.Panel;
var ProductBox = React.createClass({

  getInitialState: function() {
    return {
      data: [],
      products:[]
     };
  },
  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var products = jQuery.parseJSON(result);
      if (this.isMounted()) {
        this.setState({
          products:products.productItems.productItem
        });
      }
    }.bind(this));
  },
  render: function() {
    console.log(this.props.products);
    return (
      <div className="ProductBox">
      <div>
        <Panel header={this.state.products.name}>
          <img className="img-responsive" src="{this.state.image}"/>
        </Panel>
      </div>
      </div>
    );
  }
});


React.render(
  <ProductBox source="/my/api" />,
  document.getElementById('content')
);

fefe 27 июнь 2015, в 03:03

Источник

Теги:

reactjs

ajax

api

rendering

2 ответа

Ещё вопросы

Matan Gubkin · Answer 1 · 2015-06-27T01-00-00.000Z

Вы не должны создавать совершенно новый компонент только для своих аякс-запросов, поскольку вам придется переписывать/дублировать компонент. В каждой части вашего приложения, где есть ajax.

Лучшим решением было бы создать модуль, который обрабатывает get, post и т.д., А затем потребует его и использует его со всего приложения.

Спасибо за отзыв, можете ли вы связать меня с документами, как сделать такие модули?

Nobita · Answer 2 · 2015-06-27T02-18-00.000Z

Когда вы устанавливаете состояние, вы делаете это неправильно.

$.get(this.props.source, function(result) {
      var products = jQuery.parseJSON(result);
      if (this.isMounted()) {
        this.setState({
          products:productItems.productItem
        });
      }
    }.bind(this));

productItems не определен. Это должны быть правильные products? Потому что вы делаете var products = jQuery.parseJSON(result); ,