javascript - 出于某种原因，无法使用 Reactjs 中的 axios 从 api 获取数据以在屏幕上呈现

Question

所以我花了好几个小时尝试让我的 api 数据在 reactjs 的屏幕上呈现。我尝试调整 map 方法并尝试使用代码，但它一直给我错误

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

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