reactjs中如何从API中获取值

Posted 2023-02-15

【中文标题】reactjs中如何从API中获取值

【英文标题】：How to retrieve a value from API in react js

【发布时间】：2022-01-18 12:09:48

【问题描述】：

我想从 API 中获取值，这里在每个方法 onGetAPI、onGetCluster 等我打印整个 json 对象。输出的json对象是-http://json-parser.com/82ce228b/1

但在 json 对象中，我突出显示了 2 个值，第一个是集群 id，另一个是分析 id。我想单独打印这些值并存储在一个变量中。我想从 href 中解析出这些值并分别打印出来。

import React from 'react';
import axios from 'axios';

class MTS extends React.Component 


    onGetAPI=()=>
        var _self = this;
        axios.get('http://127.0.0.1/api/v1/version')
        .then(response =>
        
            this.setState( msgStatus : response.status, strStatusText : response.statusText ) //  console.log(this.msgStatus) ;
            return response.json();
         )
        //.then(data => this.setState( version : data )
        .then(function(json) 
            console.log(json);
            _self.receiveData(json);
            );     
    

    onGetClusters=()=>
        <label>Cluster ID <input style=backgroundColor: "lightgray" type = "textarea" ref ="input"></input></label>

        var _self = this;
        axios.get('http://127.0.0.1/api/v1/clusters')
        .then(response =>
        
            this.setState( msgStatus : response.status , strStatusText : response.statusText) //  console.log(this.msgStatus) ;
            return response.json();
          )
        //.then(data => this.setState( clusters : data )
        .then(function(json) 
            console.log(json);
            _self.receiveData(json);
            
            );
    
 
      receiveData(data) 
         this.setState(data);
      

    onGetClustersID=()=>
        var _self1 = this;
        let clusterinfo = this.refs.input.value;
        let clusterinfo1 =JSON.parse(clusterinfo);
        console.log(clusterinfo);

        axios.get(' http://127.0.0.1/api/v1/clusters/'+ clusterinfo)
        .then(response =>
            
                this.setState( msgStatus : response.status, strStatusText : response.statusText ) //  console.log(this.msgStatus) ;
                return response.json();
             )
            //.then(data => this.setState( clusters : data )
            .then(function(json) 
                console.log(json);
                _self1.receiveData(json);
                console.log(clusterinfo1);
                );
    



    render()
        

        return (
            
          <div style=backgroundColor: "lightblue">
  
              
  
              <h1 style=backgroundColor: "lightblue",color: "Darkblue",textAlign : "center"> MTS GRAPH </h1>
  
  
              <h2>1. Get the API version <button style=backgroundColor: "lightgreen" onClick = this.onGetAPI>GET - API Version</button></h2> 
  
              <h2>2.a. Get the Clusters  <button style=backgroundColor: "lightgreen" onClick = this.onGetClusters>GET - Cluster</button></h2>
             
              <h2>2.b. Get the Clusters ID <button style=backgroundColor: "lightgreen" onClick = this.onGetClustersID>GET - Cluster ID</button></h2>  
              <p>
                  <label>Cluster ID <input style=backgroundColor: "lightgray" type = "textarea" ref ="input"></input></label>
              </p>                   
  
              <h2>3.a. Get AnalysisUnit ID <button style=backgroundColor: "lightgreen" onClick = this.onGetAnalysisUnitID>GET - AnalysisUnit ID</button></h2>  
              <p>
                  <label>Cluster ID <input style=backgroundColor: "lightgray" type = "textarea" ref ="input1"></input></label>
                  <label>AnalysisUnit ID <input style=backgroundColor: "lightgray" type = "textarea" ref ="input2"></input></label>
              </p>

              <h5> ******************************************************************************************</h5>
            
            <h4>Response status : this.state.msgStatus this.state.strStatusText</h4>
            <h4> Output :  JSON.stringify(this.state.data)</h4>  

            <h5> ******************************************************************************************</h5>

           
        </div>

        
      ) 
    


export default MTS;

【问题讨论】：

receiveData 在哪里？可以加起来吗？

receiveData(data) this.setState(data);

【参考方案1】：

如果您确定这些值将始终处于其给定位置。你可以做类似的事情

const clusterId = href.split('/')[5]
const analysisId = href.split('/')[7]

【讨论】：

是的值将永远在那个位置。

【参考方案2】：

如果您知道您的 ID 前面的关键字是什么：

const getValue = (string, id) => 
    const stringArray = string.split("/");
    const index = stringArray.indexOf(id);
    return stringArray[index + 1];


clusterId = getValue(json[0].analysisUnits.links[0].href, "clusters");
analysisId = getValue(json[0].links[0].href, "aus");

【讨论】：

是否可以将其更改为键值对，这样，如果有新集群，则应该存储和添加新集群。