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

Question

我的目标是编写一个能够在其他组件中使用的组件，从端点提供产品、类别和描述的列表。

到目前为止一切顺利(console.log)，但是在 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 是“哑”组件，仅负责呈现您传递给它们的数据。