出于某种原因，不能从API获取数据来呈现使用爱可信在Reactjs在屏幕上

Question

So我一直尝试了几个小时让我的API的数据呈现在reactjs在屏幕上。香港专业教育学院试图调整地图的方法和玩弄的代码，但它不断给我的错误

它不会呈现，我在我的控制台我看到信息

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;

我的实际结果显示错误预期的结果是映射来自键“OBJECT_NAME”各公司名称

请参阅更多信息的图片。谢谢！

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} />
      )
    })}