是否通過AJAX組件中包含的循環組件擴展JSON元素？ -React JS

Question

我的目的是編寫一個可以在其他應用程序中使用的組件，並提供來自端點的產品，類別和描述的列表。

到目前為止，一切都很好（console.log），但是BUT循環在componentDidMount中是實現此目的的最佳方法嗎？ 我應該在GetData中循環還是在要使用它的另一個組件中進行forEach？

我對React還是比較陌生，因此仍在嘗試找出最佳方法。

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

您可以創建一個“智能”組件，該組件僅負責發出Ajax請求，而無需在UI中呈現“ Categories Products和“ Descriptions以外的任何內容。 您可以做的另一件事是將ajax請求移至componentWillMount 。 所以在您的情況下，我會寫這樣的東西：

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和Description是“啞”組件，僅負責顯示傳遞給它們的數據。

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

在render函數中，您仍然可以使用map函數返回React Component數組，如下例所示

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