reactjs中如何从API中获取值答案

【问题标题】：How to retrieve a value from API in react jsreactjs中如何从API中获取值
【发布时间】：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}); }

标签： javascript reactjs json rest

【解决方案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");

【讨论】：

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