Erweitern Sie JSON-Elemente durch Loop-Komponenten, die in der AJAX-Komponente enthalten sind oder nicht? - Reagieren JS

Question

Mein Ziel ist es, eine Komponente zu schreiben, die in anderen verwendet werden kann, mit einer Liste von Produkten, Kategorien und Beschreibungen von einem Endpunkt.

So weit so gut (console.log), aber Schleifen in der KomponenteDidMount der beste Weg, um darüber zu gehen? Sollte ich es sogar in GetData wiederholen oder forEach in einer anderen Komponente machen, in der ich es verwenden möchte?

Ich bin relativ neu zu reagieren, so immer noch versucht, den besten Ansatz dazu zu erarbeiten.

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

Sie können eine "intelligente" Komponente erstellen, die die Ajax-Request für die Herstellung ohne auseinander in der Benutzeroberfläche etwas Rendering von CategoriesProducts und Descriptions nur verantwortlich sein wird. Eine andere Sache, die Sie tun können, ist Ihre ajax Anfrage an componentWillMount zu verschieben. Also in Ihrem Fall würde ich so etwas schreiben:

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 und Description sind „dumme“ Komponenten nur verantwortlich für die Präsentation der Daten, die Sie an sie weitergeben.

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

Funktion in machen u noch Map-Funktion Array zurück Component

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

unten wie Beispiel Reagieren