时间戳

首页 > 解决方案 > 出于某种原因，无法使用 Reactjs 中的 axios 从 api 获取数据以在屏幕上呈现

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

问题描述

在此处输入图像描述所以我已经尝试了几个小时让我的 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”映射各种公司名称

请查看图片以获取更多信息。谢谢！ 在此处输入图像描述

标签： javascriptdatabasereactjsapi

解决方案

你应该这样做：

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

推荐阅读