从State调用一个值到componentDidMount()函数APIURL

Question

我在从 componentDidMount() 函数 API URL 中的状态渲染值时遇到问题。好吧，我基本上打了 2 API 电话。第一次调用是获取一般数据，第二次调用是从第一次调用中获取特定记录的详细信息。

从第一次调用 API 响应中，我正在获取“uniquename”，它基本上是一个 ID，并在名为“clickHandler”的函数的帮助下存储到状态“Number”中。我成功地从 render() 方法中的状态获取数据，但我无法在第二个 API 调用中替换 ID 以获取详细信息。

我的要求是，当我单击按钮时，特定的唯一名称会替换第二次调用中的 ID API URl 以获取该特定记录的详细信息。

这是我的代码。

    import React, { Component } from "react";
import axios from "axios";
import "./App.css";

class PenRecords extends Component {
  constructor(props) {
    super(props);
    this.state = {
      records: [],
      getdetails: [],
      errorMessage: "",
      errorMessage2: "",
      Number: "IR34400",
    };

    this.clickHandler = this.clickHandler.bind(this);
  }

  componentDidMount() {
    const headers = {
      "Content-Type": "application/json",
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
      Authorization: "Bearer abcdef-fccf-9scegs-l6a7-844a4ff31296",
    };

    axios
      .get(
        "/api/approval/v1/prod/pendingRecords?realm=xyz-T&limit=5&offset=2",
        { headers }
      )
      .then((res) => {
        this.setState({ records: res.data });
        console.log(res);
      })
      .catch((error) => {
        this.setState({ errorMessage: error.message });
        console.log(error);
      });

    //Get Details - I am not able to access the State "Number" Value in this second call url"
    axios
      .get(
        "/api/approval/v1/prod/documentNumber/${this.state.Number}?realm=xyz",
        { headers }
      )
      .then((res) => {
        this.setState({ getdetails: res.data });
        console.log(res);
      })
      .catch((error) => {
        this.setState({ errorMessage2: error.message });
        console.log(error);
      });
  }

  clickHandler(num) {
    this.setState({
      Number: num,
    });
  }

  render() {
    const { records } = this.state;
    const { getdetails } = this.state;
    return (
      <div>
        {this.state.errorMessage && (
          <h3 className="error">{this.state.errorMessage}</h3>
        )}
        <ul className="ulSytle">
          {records.map((record, uniqueName) => (
            <li key={record.uniqueName}>
             - {record.uniqueName} 
             - {record.documentType}
             - {record.approver} -
             
              <button onClick={() => this.clickHandler(record.uniqueName)}>
                Get Details
              </button>
            </li>
          ))}
        </ul>

        <h1>Detials - This is the second API Call Response</h1>
        <h3>{this.state.errorMessage2}</h3>
        <h1> {this.state.Number} </h1> // I can render the value here set to state but can't in the Url.
        <ul>
          <li> Title : {getdetails.title} </li>
          <li> line Item Count : {getdetails.lineItemCount} </li>
          <li> Submit Date : {getdetails.submitDate} </li>
          <li> Site : {getdetails.site} </li>
          <li> Requester : {getdetails.requesterName}</li>
        </ul>
      </div>
    );
  }
}

export default PenRecords;

非常感谢任何支持。干杯!!

Answer 1

如果我正确理解您的要求，您希望在每次用户单击调用 clickHandler 的按钮时对 "/api/approval/v1/prod/documentNumber/${this.state.Number}?realm=xyz" 进行 API 调用。这可以通过将 API 调用移出 componentDidMount 并通过将变量传递给函数来完全消除 Number 状态变量来实现。

import React, { Component } from "react";
import axios from "axios";
import "./App.css";

class PenRecords extends Component {
  headers = {
    "Content-Type": "application/json",
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    Authorization: "Bearer abcdef-fccf-9scegs-l6a7-844a4ff31296"
  };

  constructor(props) {
    super(props);
    this.state = {
      records: [],
      getdetails: [],
      errorMessage: "",
      errorMessage2: ""
    };

    this.clickHandler = this.clickHandler.bind(this);
  }

  componentDidMount() {
    let url =
      "/api/approval/v1/prod/pendingRecords?realm=xyz-T&limit=5&offset=2";
    axios
      .get(url, this.headers)
      .then((res) => {
        this.setState({ records: res.data });
        console.log(res);
      })
      .catch((error) => {
        this.setState({ errorMessage: error.message });
        console.log(error);
       });
   }

   clickHandler(uniqueName) {
     let url =
       "/api/approval/v1/prod/documentNumber/" + uniqueName + "?realm=xyz";
     axios
       .get(url, this.headers)
       .then((res) => {
         this.setState({ getdetails: res.data });
         console.log(res);
       })
       .catch((error) => {
         this.setState({ errorMessage2: error.message });
         console.log(error);
       });
  }

   render() {
     const { records } = this.state;
     const { getdetails } = this.state;
    return (
      <div>
        {this.state.errorMessage && (
          <h3 className="error">{this.state.errorMessage}</h3>
        )}
        <ul className="ulSytle">
           {records.map((record, uniqueName) => (
            <li key={record.uniqueName}>
              - {record.uniqueName}- {record.documentType}- {record.approver} 
              <button onClick={() => this.clickHandler(record.uniqueName)}>
                Get Details
              </button>
            </li>
          ))}
        </ul>

        <h1>Detials - This is the second API Call Response</h1>
        <h3>{this.state.errorMessage2}</h3>
        <ul>
          <li> Title : {getdetails.title} </li>
          <li> line Item Count : {getdetails.lineItemCount} </li>
          <li> Submit Date : {getdetails.submitDate} </li>
          <li> Site : {getdetails.site} </li>
          <li> Requester : {getdetails.requesterName}</li>
        </ul>
      </div>
    );
  }
}

export default PenRecords;

从State调用一个值到componentDidMount()函数APIURL

Call a value from State into componentDidMount () Function API URL

jsx

reactjs

es6-class