По какой-то причине не могу получить данные из API для отображения на экране с помощью Axios в Reactjs

Question

Поэтому я часами пытался вывести мои данные API для отображения на экране в реакции.Я пытался настроить метод карты и поиграться с кодом, но он продолжает выдавать мне ошибки

Он не отображает информацию, которую я вижу в своей консоли

import React, { Component } from 'react';
import './App.css';
import axios from "axios"

const user_key="cf7a5f91a3331dc1409df6bb967b9689103967f70b5b0f80fef391a4df5a1039"


class App extends Component {

  state = {
    searching: []
  }



  getInfo = (e) => {
    e.preventDefault();
   const info = e.target.elements.search.value;
   axios.get(`https://api.mattermark.com/search?key=${user_key}&term=${info}`)
   .then((res) => {
     console.log(res.data);
     this.setState({ searching: res.data})

   })
  }

  handleChange = (e) => {
    const entered = e.target.value;
    console.log(entered);
  }



  render() {
    console.log(this.state.searching)
    return (
      <div className="App">
        <header className="App-header">
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
        </header>
        <form onSubmit={this.getInfo}> 
          <input name="search" onChange={this.handleChange}/>
          <button onClick={this.handleSearch}>Search</button>
        </form>
        {this.state.searching.map((company)=> {
          return(
            <div>
             {company}
            </div>
          )

        })}
         {this.state.searching ? <p>Data: {this.state.searching}</p> : "Please type something! "}
      </div>
    );
  }
}

export default App;

Мой фактический результат показываетОшибки Ожидаемый результат заключается в сопоставлении различных названий компаний с помощью ключа "имя_объекта"

PL. См. рисунки для получения дополнительной информации.Спасибо!

Answer 1

Вы должны сделать что-то вроде этого:

{this.state.searching.map((company)=> {
      return(
        <div>
         Type:{company.object_type}
         Name:{company.object_name}
        </div>
      )

    })}

Вы не можете визуализировать объект.

UPD: вы можете использовать другой компонент для отображения информации окомпания и передать данные в вашем отображении, я бы сделал что-то вроде этого.

const CompanyInfo = ({data}) => (
          <div>
              <p>{data.object_type}</p>
              <p>{data.object_type}</p>
          </div>
)

А потом:

{this.state.searching.map((company)=> {
      return(
        <CompanyInfo data={company} />
      )
    })}