是否通过AJAX组件中包含的循环组件扩展JSON元素？ -React JS

Question

My aim is to write a component that will be able to be used in others, providing a list of products, categories, and descriptions from an endpoint.

So far so good (console.log), BUT is looping in the componentDidMount the best way to go about this? Should I even loop it in GetData or do a forEach in another component that I want to use it in?

I'm relatively new to React so still trying to work out the best approach to this.

JS:

var GetData = React.createClass({
  getInitialState: function() {
    return {
      categories: [],
      productNames: [],
      descriptions: []
    };
  },

  componentDidMount: function() {
    this.serverRequest = $.get("HTTPS://ENDPOINT", function (result) {
      var products = result;
      for (var i = 0; i < products.data.length; i++) {
         this.setState({
               categories :   products.data[i].categories[0].title,
               productNames : products.data[i].title,
               descriptions :  products.data[i].descriptions
         });
      }
    }.bind(this));
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
   console.log(this.state.categories);
   // console.log(this.state.productNames);
   // console.log(this.state.descriptions);
    return (
        this.props.categories.forEach(function(category) {
         // ??
        },
        this.props.products.forEach(function(product) {
         // ??
        },
        this.props.descriptions.forEach(function(description) {
         // ??
        },

    )
  }
});

Answer 1

You can create a "smart" component that will be responsible only for making the Ajax Request without rendering anything in the UI apart from Categories Products and Descriptions . Another thing that you can do is to move your ajax request to componentWillMount . So in your case I would write something like that :

import Category    from 'components/Category';
import Description from 'components/Description';
import Product     from 'components/Product';

export default class AjaxRequestComponent extends Component
{
  componentWillMount: function() {
    $.get("HTTPS://ENDPOINT", function (result) {
      var products = result;
      for (var i = 0; i < products.data.length; i++) {
         this.setState({
               categories :   products.data[i].categories[0].title,
               productNames : products.data[i].title,
               descriptions :  products.data[i].descriptions
         });
      }
    }.bind(this));
  }

  render(){
       return(
        {
           this.state.descriptions.map( d => <Description {...d} />)
           this.state.products.map( p => <Products {...p} />)
           this.state.categories.map( c => <Category {...c} />)
        }
       )
  }

}

Category , Products and Description are "dumb" components only responsible for presenting the data that you pass to them.

Answer 2

  componentDidMount: function() {
    this.serverRequest = $.get("HTTPS://ENDPOINT", function (result) {
      var products = result;

      var categories =  products.data.map(function(item){
                   return item.categories[0].title;
               };
      var productNames =  products.data.map(function(item){
                   return item.title;
               };
      var descriptions=  products.data.map(function(item){
                   return item.descriptions;
               };
      }
      this.setState({
           categories :   categories ,
           productNames : productNames ,
           descriptions :  descriptions 
      });
    }.bind(this));
  },

in render function u can still use map function to return Array of React Component like example below

render: function() {
    return (
        <div>
        {this.state.categories.map(function(category) {
             return <span>{category}</span>
        }}
        </div>
    )
  }