使用componentWillmount React.Js渲染Json数据

Question

我在React中还很陌生，我正在尝试从Json文件渲染数据，我已经读了一些有关componentWillmount和componentDidmount的知识，但是我不知道如何使用它们，所以我很漂亮不知道该怎么办，在哪里。

对Json的调用没问题，我得到了数据，但是我不知道如何在我的应用程序中呈现它...

我想在 ProductosDestacados 组件中呈现数据，并在 console.log（getWebServiceResponse（productsIdsJoin，96））; 中显示数据的输出我知道调用功能还可以

这是我的代码（对不起，我不得不隐藏其中的一部分）

import React, { Component } from 'react';
import Slider from 'react-slick';
import './App.css';
import axios from 'axios';

// SETTINGS PARA CARRUSEL DE PRODUCTOS
var settings = {
  dots: true,
  infinite: false,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,
  initialSlide: 0,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        initialSlide: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
};
// END

// THIS IS THE CALL TO JSON
/**
 *
 * @param {*} productsIds List of products
 * @param {*} storeId the store ID
 */
var productsIds = ['3552357','2635968BC','3181464'];
var productsIdsJoin = productsIds.join('-');

const getProductDetailAPI = (productsIdsJoin, storeId) => ({
  method: 'GET',
  baseURL: `https://sample.data/json{ "productId" : "${productsIdsJoin}","storeId":"${storeId}"}`,
  auth: {
    username: 'XXXXXXXX',
    password: 'XXXXXXXX',
  },
  headers: {
    'Content-Type': 'application/json',
  },
  data: {},
});

const getWebServiceResponse = (currentList, storeId) => (
  axios(getProductDetailAPI(currentList, storeId))
    .then(response => response.data)
    .then(newData => {
      newData.productDetailsJson.map(detail => {
        console.log(detail.productId);
      })
    })
    .catch(e => e)
);

console.log(getWebServiceResponse(productsIdsJoin, 96));

//END OF CALL

const ContenidoUnoTitulo = (props) => {
  return (
    <h1 id="titulo">
      {props.tituloUno}

    </h1>
  );
}

const ContenidoUno = (props) => {
  return (
    <div className="contentBox outerBox-first" >
      <a href={props.link}><img src={props.imagen} alt="bloque 01" className="img-wrap" /></a>
      <h3>{props.categoria}</h3>
      <img src={props.icono} className="iconic" alt="producto" />
      <span>{props.descripcion}</span>
      <strong>${props.normal}</strong>
      <small>Antes: ${props.antes}</small>
      <div className="containerBotonRow">
        <a href={props.link}><button className="botonRow">¡Lo quiero!</button></a>
      </div>
    </div>
  );
}

const ContenidoDosTitulo = (props) => {
  return (
    <h2 id="titulo" className="marginTop-6">
      {props.tituloDos}
    </h2>
  );
}

const ContenidoDos = (props) => {
  return (
    <div className="contentBoxTwoMain outerBox-second">
      <a href={props.link}><img src={props.imagen} alt="bloque 01" className="img-wrap" /></a>
      <h3>{props.categoria}</h3>
      <img src={props.icono} className="iconic" alt="producto" />
      <span>{props.descripcion}</span>
      <strong>${props.normal}</strong>
      <small>Antes: ${props.antes}</small>
      <div className="containerBotonRow">
        <a href={props.link}><button className="botonRow">¡Lo quiero!</button></a>
      </div>
    </div>
  );
}

const ContenidoDosRow = (props) => {
  return (
    <div className="contentBoxTwoRow outerBox-second" >
      <a href={props.ancla}>
        <img src={props.imagen} alt="bloque 01" className="img-wrap" />
      </a>
      <h3>{props.categoria}</h3>
    </div>
  );
}


const BotonesLinkUno = (props) => {
  return (
    <div className="btnPad" >
      <a href={props.boton}>
        <button className="botonRow">Todo Categoría</button>
      </a>
    </div>
  );
}

const ContenidoTresTitulo = (props) => {
  return (
    <h2 id="titulo" className="marginTop-6">
      {props.tituloTres}
    </h2>
  );
}

const ContenidoTres = (props) => {
  return (
    <div className="contentBoxTwoMain outerBox-second" >
      <a href={props.link}><img src={props.imagen} alt="bloque 01" className="img-wrap" /></a>
      <h3>{props.categoria}</h3>
      <img src={props.icono} className="iconic" alt="producto" />
      <span>{props.descripcion}</span>
      <strong>${props.normal}</strong>
      <small>Antes: ${props.antes}</small>
      <div className="containerBotonRow">
        <a href={props.link}><button className="botonRow">¡Lo quiero!</button></a>
      </div>
    </div>
  );
}

const ContenidoTresRow = (props) => {
  return (
    <div className="contentBoxTwoRow outerBox-second" >
      <a href={props.ancla}>
        <img src={props.imagen} alt="bloque 01" className="img-wrap" />
      </a>
      <h3>{props.categoria}</h3>
    </div>
  );
}


const BotonesLinkDos = (props) => {
  return (
    <div className="btnPad" >
      <a href={props.boton}>
        <button className="botonRow">Todo Categoría</button>
      </a>
    </div>
  );
}

const ContenidoCuatroTitulo = (props) => {
  return (
    <h2 id="titulo" className="marginTop-6">
      {props.tituloCuatro}
    </h2>
  );
}

const ContenidoCuatroBloques = (props) => {
  return (
    <div>
      <div className="contentBox outerBox-first">
        <a href={props.bloquesContentLink}><div className="boxInner"></div></a>
        <img src={props.bloquesContentImg} className="img-wrap" alt="Imagen" />
        <img src={props.bloquesContentIcono} className="iconicMid" alt="Imagen" />
        <a href={props.bloquesContentLink}>
          <h4>{props.bloquesContentTexto}</h4>
        </a>
      </div>
    </div>
  );
}

const ContenidoCincoTitulo = (props) => {
  return (
    <h2 id="titulo" className="marginTop-6">
      {props.tituloCinco}
    </h2>
  );
}

const ProductosDestacados = (props) => {
  return (
    <div className="contentBox outerBox-third" >
      <a href={props.link}>
      <div className="boxInfoSku">
        <img src={props.imagen} alt="bloque 01" className="img-wrap" />
        <br />
        <span>{props.descripcion}</span><br />
        <img src={props.icono} alt="producto" className="iconic" />
        <strong>${props.normal}</strong>
        <small>${props.antes}</small><br />
        <a href={props.link}><button className="botonRow" style={{ marginTop: '5px' }}>¡Lo quiero!</button></a>
      </div>
      </a>
    </div>
  );
}

const ContenidoSeisTitulo = (props) => {
  return (
    <h2 id="titulo" className="marginTop-6">
      {props.tituloSeis}
    </h2>
  );
}

const Inspiracion = (props) => {
  return (
    <div className="outerBox-inspiration anclaInspiracion">
      <div className={props.margen}>
        <a href={props.link}>
          <img src={props.banner} alt={props.descripcion} className="showFalseMobile" />
          <img src={props.bannerMob} alt={props.descripcion} className="showTrue" />
        </a>
      </div>
      <a href={props.link}>
        <div className={props.boxdisplay}>
          <h4>{props.title[0]}<strong>{props.title[1]}</strong></h4>
          <a href={props.link}><button className="botonRow">{props.boton}</button></a>
        </div>
      </a>
    </div>
  );
}

const ContenidoSieteTitulo = (props) => {
  return (
    <h2 id="titulo" className="marginTop-6">
      {props.tituloSiete}
    </h2>
  );
}

const ThirdContent = (props) => {
  return (
    <div>
      <div className="contentBoxBlog">
          <div>
            <div className="topicoContent">
              <small>{props.topic}</small>
            </div>
            <a href={props.link}><img src={props.banner} alt={props.title} className="img-wrap" /></a>
            <strong>{props.title}</strong>
            <p>{props.preview.split(' ').slice(0, 15).join(' ') + '...'}</p>
            <a href={props.link}>Seguir leyendo...</a>
            <div className="infoEntradaBlog">
              <span>{props.date}</span>
            </div>
          </div>
      </div>
    </div>
  );
}



class App extends Component {

  state = {
    titulos: [
      {
        tituloUno: 'Estas a un paso de enamorarte de estos productos',
        tituloDos: 'Muebles para crear espacios confortable',
        tituloTres: 'Decoración para que tus espacios sean únicos',
        tituloCuatro: '¿Buscas las mejores oportunidades? encuentra los mejores precios para ti',
        tituloCinco: '¡A todo el mundo le encantan! Productos destacados',
        tituloSeis: 'Inspírate con nuestro LookBook de la semana',
        tituloSiete: '¿Tiempo para lectura? Tendecias de diseño y deco en el blog Homy',
        key: 'mainTitles'
      }

    ],

    botonesLink: [
      {
        botonUno: 'http://youtube.com',
        botonDos: 'http://amazon.com',
        key: 'mainButtons'
      }
    ],

    contenidosUno: [
      {
        imagenBanner: 'http://via.placeholder.com/570x250',
        categoria: 'Categoria 01',
        linkCat: 'https://www.myapp.cl/myapp-homy/category/cat570061/accesorios-cocina',
        icono: 'http://via.placeholder.com/30/000000/FFFFFF',
        descripcion: 'Descripción de producto',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU01'
      },
      {
        imagenBanner: 'http://via.placeholder.com/570x250',
        categoria: 'Categoria 02',
        linkCat: 'https://www.myapp.cl/myapp-homy/category/cat570061/accesorios-cocina',
        icono: 'http://via.placeholder.com/30/000000/FFFFFF',
        descripcion: 'Descripción de producto',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU02'
      },
      {
        imagenBanner: 'http://via.placeholder.com/570x250',
        categoria: 'Categoria 03',
        linkCat: 'https://www.myapp.cl/myapp-homy/category/cat570061/accesorios-cocina',
        icono: 'http://via.placeholder.com/30/000000/FFFFFF',
        descripcion: 'Descripción de producto',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU03'
      },
      {
        imagenBanner: 'http://via.placeholder.com/570x250',
        categoria: 'Categoria 04',
        linkCat: 'https://www.myapp.cl/myapp-homy/category/cat570061/accesorios-cocina',
        icono: 'http://via.placeholder.com/30/000000/FFFFFF',
        descripcion: 'Descripción de producto',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU04'
      }
    ],

    contenidosDos: [
      {
        imagenBanner: 'http://via.placeholder.com/670x551',
        categoria: 'Categoria 01',
        icono: 'http://via.placeholder.com/30/000000/FFFFFF',
        descripcion: 'Descripción de producto',
        linkSku: 'https://www.myapp.cl/myapp-homy/product/332771X',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU05'
      }
    ],

    contenidosDosRow: [
      {
        imagenBanner: 'http://via.placeholder.com/470x249',
        categoria: 'Categoria 02',
        link: 'http://youtube.com',
        key: 'CAT01'
      },
      {
        imagenBanner: 'http://via.placeholder.com/470x249',
        categoria: 'Categoria 03',
        link: 'http://youtube.com',
        key: 'CAT02'
      }
    ],

    contenidosTres: [
      {
        imagenBanner: 'http://via.placeholder.com/670x551',
        categoria: 'Categoria 01',
        icono: 'http://via.placeholder.com/30/000000/FFFFFF',
        descripcion: 'Descripción de producto',
        linkSku: 'https://www.myapp.cl/myapp-homy/product/332771X',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU06'
      }
    ],

    contenidosTresRow: [
      {
        imagenBanner: 'http://via.placeholder.com/470x249',
        categoria: 'Categoria 02',
        link: 'http://youtube.com',
        key: 'CAT03'
      },
      {
        imagenBanner: 'http://via.placeholder.com/470x249',
        categoria: 'Categoria 03',
        link: 'http://youtube.com',
        key: 'CAT04'
      }
    ],

    contenidoCuatro: [
      {
        imagenBanner: 'http://via.placeholder.com/370x370',
        link: 'http://altavista.com',
        texto: 'Texto para link',
        icono: 'http://via.placeholder.com/100x50/FFC600/FFFFFF?text=Icono',
        key: 'CAT05'
      },
      {
        imagenBanner: 'http://via.placeholder.com/370x370',
        link: 'http://altavista.com',
        texto: 'Texto para link',
        icono: 'http://via.placeholder.com/100x50/FFC600/FFFFFF?text=Icono',
        key: 'CAT06'
      },
      {
        imagenBanner: 'http://via.placeholder.com/370x370',
        link: 'http://altavista.com',
        texto: 'Texto para link',
        icono: 'http://via.placeholder.com/100x50/FFC600/FFFFFF?text=Icono',
        key: 'CAT07'
      }
    ],

    productosContenidoCinco: [
      {
        imagenSKU: 'http://via.placeholder.com/200x200',
        linkSKU: 'http://altavista.com',
        decripcionSKU: 'Texto producto aquí',
        iconoPromo: 'http://via.placeholder.com/100x50/FFC600/FFFFFF?text=Icono',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU07'
      },
      {
        imagenSKU: 'http://via.placeholder.com/200x200',
        linkSKU: 'http://altavista.com',
        decripcionSKU: 'Texto producto aquí',
        iconoPromo: 'http://via.placeholder.com/100x50/FFC600/FFFFFF?text=Icono',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU08'
      },
      {
        imagenSKU: 'http://via.placeholder.com/200x200',
        linkSKU: 'http://altavista.com',
        decripcionSKU: 'Texto producto aquí',
        iconoPromo: 'http://via.placeholder.com/100x50/FFC600/FFFFFF?text=Icono',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU09'
      },
      {
        imagenSKU: 'http://via.placeholder.com/200x200',
        linkSKU: 'http://altavista.com',
        decripcionSKU: 'Texto producto aquí',
        iconoPromo: 'http://via.placeholder.com/100x50/FFC600/FFFFFF?text=Icono',
        precioNormal: 999999,
        precioAntes: 999999,
        key: 'SKU10'
      }
    ],

    inspiracion: [
      {
        BannerImg: 'http://via.placeholder.com/950x400',
        BannerImgMob: 'http://via.placeholder.com/400x400',
        Bloque: 'http://via.placeholder.com/100x100',
        BloqueDisplay: 'bloqueInspiracionContLB',
        Link: 'http://amazon.com',
        Boton: 'Ver LookBook',
        Title: 'Look Book',
        Margen: 'aLaIzquierda',
        Descripcion: 'Lorem ipsum de Look Book',
        key: 'CONTENIDO01'
      },
      {
        BannerImg: 'http://via.placeholder.com/950x400',
        BannerImgMob: 'http://via.placeholder.com/400x400',
        Bloque: 'http://via.placeholder.com/100x100',
        BloqueDisplay: 'bloqueInspiracionContLN',
        Link: 'http://amazon.com',
        Boton: 'Ir a lo Nuevo',
        Title: 'Lo Nuevo',
        Margen: 'aLaDerecha',
        Descripcion: 'Lorem ipsum de Lo Nuevo',
        key: 'CONTENIDO02'
      },
      {
        BannerImg: 'http://via.placeholder.com/950x400',
        BannerImgMob: 'http://via.placeholder.com/400x400',
        Bloque: 'http://via.placeholder.com/100x100',
        BloqueDisplay: 'bloqueInspiracionContLB',
        Link: 'http://amazon.com',
        Boton: 'Ver Todo',
        Title: 'Diseño Nacional',
        Margen: 'aLaIzquierda',
        Descripcion: 'Lorem ipsum de Diseño Nacional',
        key: 'CONTENIDO03'
      }
    ],

    blogContent: [
      {
        bannerBlog: 'http://via.placeholder.com/300x250',
        titleBlog: 'Entrada de blog 01',
        parrafoBlog: 'Irure incididunt eiusmod aliqua laboris occaecat veniam sunt reprehenderit velit velit nostrud. Culpa enim proident elit sit voluptate aute adipisicing nostrud eiusmod voluptate non excepteur tempor. Consequat id deserunt ipsum mollit sint ex proident officia qui culpa irure enim Lorem. Enim elit laboris culpa esse adipisicing ullamco nulla aute occaecat nisi sunt. Cupidatat tempor aliqua ullamco qui cupidatat deserunt irure tempor reprehenderit officia Lorem. Esse laborum magna aliqua in amet dolor.',
        linkBlog: 'http://google.com',
        dateBlog: '01 de octubre del 2018',
        topico: 'Decomuro',
        key: 'BLOG01'
      },
      {
        bannerBlog: 'http://via.placeholder.com/300x250',
        titleBlog: 'Entrada de blog 02',
        parrafoBlog: 'Irure incididunt eiusmod aliqua laboris occaecat veniam sunt reprehenderit velit velit nostrud. Culpa enim proident elit sit voluptate aute adipisicing nostrud eiusmod voluptate non excepteur tempor. Consequat id deserunt ipsum mollit sint ex proident officia qui culpa irure enim Lorem. Enim elit laboris culpa esse adipisicing ullamco nulla aute occaecat nisi sunt. Cupidatat tempor aliqua ullamco qui cupidatat deserunt irure tempor reprehenderit officia Lorem. Esse laborum magna aliqua in amet dolor.',
        linkBlog: 'http://google.com',
        dateBlog: '02 de octubre del 2018',
        topico: 'Adornos de Baños',
        key: 'BLOG02'
      },
      {
        bannerBlog: 'http://via.placeholder.com/300x250',
        titleBlog: 'Entrada de blog 03',
        parrafoBlog: 'Irure incididunt eiusmod aliqua laboris occaecat veniam sunt reprehenderit velit velit nostrud. Culpa enim proident elit sit voluptate aute adipisicing nostrud eiusmod voluptate non excepteur tempor. Consequat id deserunt ipsum mollit sint ex proident officia qui culpa irure enim Lorem. Enim elit laboris culpa esse adipisicing ullamco nulla aute occaecat nisi sunt. Cupidatat tempor aliqua ullamco qui cupidatat deserunt irure tempor reprehenderit officia Lorem. Esse laborum magna aliqua in amet dolor.',
        linkBlog: 'http://google.com',
        dateBlog: '03 de octubre del 2018',
        topico: 'Escritorio y Oficina',
        key: 'BLOG03'
      }

    ]

  };

  render() {
    return (
      <div>
        <div className="row">
          <div className="tituloCalipso marginAuto">
            {this.state.titulos.map(titulos =>
              <ContenidoUnoTitulo
                tituloUno={titulos.tituloUno}
                key={titulos.key} />
            )}
          </div>
        </div>

        <div className="row">
          <div className="blockCatPrice">
            {this.state.contenidosUno.map(contenido =>
              <ContenidoUno
                imagen={contenido.imagenBanner}
                categoria={contenido.categoria}
                link={contenido.linkCat}
                icono={contenido.icono}
                descripcion={contenido.descripcion}
                normal={contenido.precioNormal}
                antes={contenido.precioAntes}
                key={contenido.key} />
            )}
          </div>
        </div>

        <div className="row">
          <div className="tituloCalipso marginAuto">
            {this.state.titulos.map(titulos =>
              <ContenidoDosTitulo
                tituloDos={titulos.tituloDos}
                key={titulos.key} />
            )}
          </div>
        </div>

        <div className="row">
          <div className="blockCatPrice">
            {this.state.contenidosDos.map(contenido =>
              <ContenidoDos
                imagen={contenido.imagenBanner}
                categoria={contenido.categoria}
                icono={contenido.icono}
                link={contenido.linkSku}
                descripcion={contenido.descripcion}
                normal={contenido.precioNormal}
                antes={contenido.precioAntes}
                key={contenido.key} />
            )}
            <div>
              {this.state.contenidosDosRow.map(contenido =>
                <ContenidoDosRow
                  imagen={contenido.imagenBanner}
                  categoria={contenido.categoria}
                  ancla={contenido.link}
                  key={contenido.key}
                />)}
              <div>
                {this.state.botonesLink.map(botonesLink =>
                  <BotonesLinkUno
                    boton={botonesLink.botonUno}
                    key={botonesLink.key}
                  />)}
              </div>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="tituloCalipso marginAuto">
            {this.state.titulos.map(titulos =>
              <ContenidoTresTitulo
                tituloTres={titulos.tituloTres}
                key={titulos.key} />
            )}
          </div>
        </div>

        <div className="row">
          <div className="blockCatPrice">
            <div>
              {this.state.contenidosTresRow.map(contenido =>
                <ContenidoTresRow
                  imagen={contenido.imagenBanner}
                  categoria={contenido.categoria}
                  ancla={contenido.link}
                  key={contenido.key}
                />)}
              <div>
                {this.state.botonesLink.map(botonesLink =>
                  <BotonesLinkDos
                    boton={botonesLink.botonDos}
                    key={botonesLink.key}
                  />)}
              </div>
            </div>
            {this.state.contenidosTres.map(contenido =>
              <ContenidoTres
                imagen={contenido.imagenBanner}
                categoria={contenido.categoria}
                icono={contenido.icono}
                link={contenido.linkSku}
                descripcion={contenido.descripcion}
                normal={contenido.precioNormal}
                antes={contenido.precioAntes}
                key={contenido.key} />
            )}
          </div>
        </div>

        <div className="row">
          <div className="tituloCalipso marginAuto">
            {this.state.titulos.map(titulos =>
              <ContenidoCuatroTitulo
                tituloCuatro={titulos.tituloCuatro}
                key={titulos.key} />
            )}
          </div>
        </div>

        <div className="row">
          <div className="blockCatPrice">
            {this.state.contenidoCuatro.map(bloques =>
              <ContenidoCuatroBloques
                bloquesContentImg={bloques.imagenBanner}
                bloquesContentLink={bloques.link}
                bloquesContentTexto={bloques.texto}
                bloquesContentIcono={bloques.icono}
                key={bloques.key}
              />
            )}
          </div>
        </div>

        <div className="row">
          <div className="tituloCalipso marginAuto">
            {this.state.titulos.map(titulos =>
              <ContenidoCincoTitulo
                tituloCinco={titulos.tituloCinco}
                key={titulos.key} />
            )}
          </div>
        </div>

        <div className="containerHomyCarrusel">
          <Slider {...settings}>
            {this.state.productosContenidoCinco.map(contenido =>
              <ProductosDestacados
                imagen={contenido.imagenSKU}
                link={contenido.linkSKU}
                descripcion={contenido.decripcionSKU}
                normal={contenido.precioNormal}
                antes={contenido.precioAntes}
                icono={contenido.iconoPromo}
                key={contenido.key} />
            )}
          </Slider>
        </div>

        <div className="row">
          <div className="tituloCalipso marginAuto">
            {this.state.titulos.map(titulos =>
              <ContenidoSeisTitulo
                tituloSeis={titulos.tituloSeis}
                key={titulos.key} />
            )}
          </div>
        </div>

        <div>
          <div className="containerInspiracion">
            {this.state.inspiracion.map(contenido =>
              <Inspiracion
                banner={contenido.BannerImg}
                bannerMob={contenido.BannerImgMob}
                descripcion={contenido.Descripcion}
                box={contenido.Bloque}
                boton={contenido.Boton}
                link={contenido.Link}
                title={contenido.Title.split(' ')}
                margen={contenido.Margen}
                boxdisplay={contenido.BloqueDisplay}
                key={contenido.key}
              />
            )}
          </div>
        </div>

        <div className="row">
          <div className="tituloCalipso marginAuto">
            {this.state.titulos.map(titulos =>
              <ContenidoSieteTitulo
                tituloSiete={titulos.tituloSiete}
                key={titulos.key} />
            )}
          </div>
        </div>

        <div className="row">
          <div className="blockCatPrice">
            {this.state.blogContent.map(item =>
              <ThirdContent
                banner={item.bannerBlog}
                title={item.titleBlog}
                preview={item.parrafoBlog}
                link={item.linkBlog}
                date={item.dateBlog}
                topic={item.topico}
                key={item.key}
              />
            )}
          </div>
        </div>

      </div>
    );
  }
}

export default App;

Answer 1

在此简化的示例中，当组件安装时，我们使用componentDidMount生命周期方法来调用API。从API提取数据时，我们显示正在加载产品... 消息。

请求完成后，我们将数据存储在state.products中。一旦检测到状态更改，该组件将重新渲染并显示ProductosDestacados组件，其中state.products作为prop传递。在ProductosDestacados中，您可以通过props.products访问此数据。

这应该可以帮助您了解要完成的工作的基本概念。

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            products: []
        };
    }
    componentDidMount() {
        this.getWebServiceResponse();
    }
    getWebServiceResponse = () => {
        axios(getProductDetailAPI(currentList, storeId))
        .then(response => response.data)
        .then(newData => {
            // store response in state
            this.setState({products: newData.products});
        });
    }
    render() {
        const { products } = this.state;
        if (products.length) {
            return <ProductosDestacados products={products}/>;
        }
        else return (
            <div>Loading Products...</div>
        );
    }
}

  

componentWillMount()被认为是旧版本，您应该避免在新代码中使用它。

https://reactjs.org/docs/react-component.html#the-component-lifecycle