使用 axios 到 map 卡发送请求到 elasticsearch

Question

I have a frontend react app that have cards, search bar, and filters. So to map the cards that I have, I want to send a request to elasticsearch (port:9200) using axios to save all the data in array and map my cards as I want, can you please help me?

Edit: I update the code here and include all of it, but there is no card mapped

    function CreateCards(NCARMap) {
    return(
        <SimpleCard
        key={NCARMap.id}
        theCardId={NCARMap.id}
        cardType={NCARMap.approvetool}
        cardNum={NCARMap.num}
        cardName={NCARMap.name}
        cardDate={NCARMap.date}
        // cardCategory={NCARMap.cardCategory}
        // cardSource={NCARMap.cardSource}
        cardDesc={NCARMap.summary}
        cardURL={NCARMap.image}
        />
    );

}

//create the class
export default class OfficialDocument extends Component {
  constructor(props) {
    super(props);

    this.state = { 
      NCARMap: [],
      NCARMapAS: [],
    };
  }
  componentDidMount(){
    //Get NCARMap data, NCARMapAS used for filtring and sorting the cards
    axios.get('http://localhost:9200/ncar_index/ncar/_search')
        .then(resp => {
            console.log(resp)
            this.setState({
              NCARMap: resp._source, 
              NCARMapAS:resp.data
        })
        console.log(this.state.NCARMap)
    })
}
  handleChange(event) {
    const search_query = event.target.value;

  }

    render(){
        return(
          //HTML FILE Converted to React
            <div>
  <meta charSet="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
  <title>منشآت</title>
  <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon" />
  {/*============= ScrollToTop Section Starts Here =============*/}
  <div className="overlayer" id="overlayer">
    <div className="loader">
      <div className="loader-inner" />
    </div>
  </div>
  <a href="#0" className="scrollToTop"><i className="fas fa-angle-up" /></a>
  <div className="overlay" />
  {/*============= ScrollToTop Section Ends Here =============*/}
  {/*============= Header Section Starts Here =============*/}
  <header className="header-section">
    <div className="container">
      <div className="header-wrapper">
        <div className="logo-area">
          <div className="logo">
            <a href="/">
              <img src="/images/logo/logo.png" alt="logo" />
            </a>
          </div>
          <div className="support headFont">
            <a href="/">الصفحة الرئيسية</a>
          </div>
        </div>
        <ul className="menu headFont">
          <li>
            {/*Here we need to change the herf link*/}
            <a href="/OfficialDocument">الوثائق و المحفوظات</a> 
          </li>
          <li>
            <a href="/WasPage">الأخبار</a>
          </li>
          <li>
            {/*Here we need to change the herf link*/}
            <a href="/TweetsPage">التغريدات</a>
          </li>
          {/*Here we need to change the herf link*/}
          {/* I want to know the diffrence between the two below */}
          <li className="d-md-none text-center">
            <a href="#0" className="m-0 header-button">تسجيل دخول</a>
          </li>
        </ul>
        <div className="header-bar d-lg-none">
          <span style={{backgroundColor: '#00A7CF'}} />
          <span style={{backgroundColor: '#00A7CF'}} />
          <span style={{backgroundColor: '#00A7CF'}} />
        </div>
        {/* <div class="header-right"> */}
        {/*Here we need to change the herf link*/}
        {/* <a href="#0" class="header-button d-none d-md-inline-block">تسجيل دخول</a>
          </div> */}
      </div>
    </div>
  </header>
  {/*============= Header Section Ends Here =============*/}
  {/*============= Banner Section Starts Here =============*/}
  <section className="banner-2 bg_img" data-background="/images/banner/background3.png">
    <div className="container">
      <div className="banner-content-2">
        <h1 className="title cl-white">مرحباً بك في قسم الوثائق والمحفوظات</h1>
        <p className=" cl-white">يحتوي هذا القسم على الوثائق والمحفوظات المعتمدة من المركز الوطني للوثائق والمحفوظات</p>
        <form className="search-form round">
          <input type="text" style={{textAlign: 'right', color: 'black'}} placeholder="... ابحث هنا" />
          <button type="submit"><i className="flaticon-search" /> <span className="d-none d-sm-inline-block">ابحث</span></button>
        </form>
      </div>
    </div>
  </section>
  {/*============= Banner Section Ends Here =============*/}
  {/*============= How Search Section Starts Here =============*/}
  <div className="how-search-section padding-bottom mt--93">
    <div className="container">
      <div className="row mb-30-none justify-content-center">
      <div className="filter-rtl">
           {/*begin::Body*/}
<div className="card-body filters">
  {/*begin::Form*/}
  <form>
    {/*begin::Categories*/}
    <div className="form-group mb-11">
      <label className="font-size-h3 font-weight-bolder text-dark mb-7">التنصيفات</label>
      {/* start dropdown menue */}
      <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        أداة الاعتماد
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">أمر ملكي</a>
        <a class="dropdown-item" href="#">مرسوم ملكي</a>
        <a class="dropdown-item" href="#">قرار مجلس الوزراء</a>
        <a class="dropdown-item" href="#">أمر سامي</a>
        <a class="dropdown-item" href="#">قرار وزاري</a>
        <a class="dropdown-item" href="#">قرار مجالس وهيئات</a>
        <a class="dropdown-item" href="#">قرار إداري</a>
        <a class="dropdown-item" href="#">توجيه سامي</a>
    </div>
</div>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        فئة الوثيقة
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">الاتفاقيات و المعادات الدولية العامة</a>
        <a class="dropdown-item" href="#">الاتفاقيات الدولية الثنائية</a>
        <a class="dropdown-item" href="#">الاتفاقيات الدولية متعددة الأطراف</a>
    </div>
</div>
    </div>
    {/* end dropdown menue */}
    {/* Start: : DateRangePickerComponent */}
        <DateRangePickerComponent></DateRangePickerComponent>
    {/* End: : DateRangePickerComponent */}
    {/*end::Categories*/}
    <button type="submit" className="btn btn-primary font-weight-bolder mr-2 px-8">إعادة ضبط</button>
    <button type="reset" className="btn-submit btn btn-clear font-weight-bolder text-muted px-8">بحث</button>
  </form>
  {/*end::Form*/}
</div>
{/*end::Body*/}
</div>
      <div className="general-card"> 
        {this.state.NCARMap.map(CreateCards)}
        {console.log(this.state.NCARMap)}
    </div>
      </div>
    </div>
  </div>
  {/*============= How Search Section Ends Here =============*/}
  {/*============= Footer Section Starts Here =============*/}
  <footer className="footer-section pt-70-145">
    <div className="dot-slider bg_img" />
    <div className="container">
      <div className="row mb--50 justify-content-between">
        <div className="col-sm-8 col-lg-4">
          <div className="footer-widget widget-about">
          </div>
        </div>
      </div>
    </div>
    <div className="footer-bottom cl-white">
      <p>جميع الحقوق محفوظة © 2021</p>
    </div>
  </footer>
  {/*============= Footer Section Ends Here =============*/}
</div>
        )}
    }

Answer 1

You need to add render method to your class component

export default class OfficialDocument extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      NCARMap: [],
      NCARMapAS: [],
      // need to add status
      status: 'idle',
    };
  }
  componentDidMount() {
    //Get NCARMap data, NCARMapAS used for filtring and sorting the cards
    this.setState({
      status: 'pending',
    });
    axios
      .get('http://localhost:9200/ncar_index/ncar/_search')
      .then((resp) => {
        console.log(resp);
        this.setState({
          NCARMap: resp._source,
          NCARMapAS: resp.data,
          status: 'success',
        });
        console.log(this.state.NCARMap);
      })
      .catch(() => {
        this.setState({
          status: 'error',
        });
      });
  }

  render() {
    return (
      <div>
        {this.state.status === 'pending' && <div>Loading...</div>}
        {this.state.status === 'error' && <div>Error</div>}
        {this.state.status === 'success' && this.NCARMap.map((item) => {
          return <CreateCards key={id} {...item} />;
        })}
      </div>
    );
  }
}

Answer 2

I answer this by receives them as objects:

code

      <div className="general-card1">
        {this.state.noPlaceFound ? (
          <h3 className="noPlaceFound">
            <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i>
            لا يوجد نتائج
          </h3>
        ) : (
          this.state.TweetsMap.map((v) => CreateCards(v._source))
        )}
      </div>