如何在基於 React js 的 ID 中獲取 api 中的數據

Question

如何在基於 React js 的 ID 中獲取 api 中的數據。我在下面的代碼中創建一個表，當我首先單擊行時，然后根據第一次單擊行獲取數據。https://mocki.io/v1/ 4d51be0b-4add-4108-8c30-df4d60e8df54。 這是我的 api 我嘗試制作，但我無法做到這一點。我想當我單擊 row1 時，然后在 api 中獲取 id 為 2 的數據，我們該怎么做

class TableComponent extends React.Component {
  state = {};

  handleRowClick = async () => {
    // make an API call here, sth like
    const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
    const response = await fetch(url);
    this.setState({
      ...response,
    });
  };

  render() {
    var dataColumns = this.props.data.columns;
    var dataRows = this.props.data.rows;

    var tableHeaders = (
      <thead>
        <tr>
          {" "}
          {dataColumns.map(function (column) {
            return <th> {column} </th>;
          })}{" "}
        </tr>{" "}
      </thead>
    );

    var tableBody = dataRows.map((row) => {
      return (
        <tr onClick={this.handleRowClick}>
          {" "}
          {dataColumns.map(function (column) {
            return (
              <td>
                {" "}
                <a target="_blank" rel="noopener noreferrer" href={row.url}>
                  {" "}
                  {row[column]}{" "}
                </a>
              </td>
            );
          })}{" "}
        </tr>
      );
    });

    // Decorate with Bootstrap CSS
    return (
      <table className="table table-bordered table-hover" width="100%">
        {" "}
        {tableHeaders} {tableBody}{" "}
      </table>
    );
  }
}

// Example Data
var tableData = {
 columns: ['Service_Name', 'Cost/Unit'],
  rows: [{
    'Service_Name': 'airplane',
    'Cost/Unit': 50
   
  }, {
    'Service_Name': 'cat',
    'Cost/Unit': 50
  },{
    'Service_Name': 'fruits',
    'Cost/Unit': 50
  }, {
    'Service_Name': 'pool',
    'Cost/Unit': 50
  }]
};

ReactDOM.render(
  <TableComponent data = {tableData} />,
  document.getElementById('table-component'));

Answer 1

您需要在tableData中為每行數據添加唯一 ID。 現在，ID 將在創建表時用作 React 指南的每一行的key ，並且還根據行用戶單擊傳遞給handleRowClick function

https://codepen.io/rohit-ambre/pen/NWdJpbp

檢查上面的codepen，我對handleClick function做了一些小改動。 （目前它返回所有數據）

但是為了在這里完成您的期望，您的模擬 API 是愚蠢的，因為它沒有基於傳遞給它的任何參數返回的邏輯。 我不確定 mocki.io 是否可能。 否則，您可以在本地創建一個簡單的快速應用程序以根據傳遞的 ID 返回。 那么您的 URL 將更改如下

https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54/:id和 API 應該只返回與該 id 關聯的數據。

編輯：我已經修改了我的 codepen 以使用其他具有邏輯的 API。 此外，如果您收到 CORS 錯誤，則暫時安裝此 chrome 擴展。

我創建了一個小故障項目，它有 2 個 API 來返回基於參數的 API 或查詢的數據，我在我的代碼筆中評論了這兩個 URL。

API 信息：

1. https://grandiose-mulberry-garnet.glitch.me/query?id=<id> this API uses query parameters to accept id, if you don't pass id like https://grandiose-mulberry-garnet.glitch.me/query然后它將返回所有記錄
2. https://grandiose-mulberry-garnet.glitch.me/params/<id>這個 API 是使用路由參數來接受 id，這里必須傳遞 id。

僅供參考：在這兩個 API 中，您都需要將<id>替換為任何值，例如 1、2、4、3 等