如何获取数据 URL

Question

使用 React 在下面的代码中，当我单击 button1 时，我有两个按钮，然后打开另一个 URL，该 URL 基于 id1 在 API https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d 中获取，当我单击按钮时，然后打开在 API 中获取的不同 URL id 2 基于获取的 id。

我们如何使用 React 做到这一点？

https://codesandbox.io/s/challenge-7-fetch-a-list-final-forked-5me46?file=/src/index.js 在我的代码中检查此处当我单击 button1 时无法执行此操作，然后 URL 未在 API 中获取且未打开。我被困住了。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import ScotchInfoBar from "./ScotchInfoBar";
import "./styles.css";

function App() {
  const fetchData = async () => {
    const response = await axios.get(
      "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54"
    );

    response.data;
  };

  return (
    <div className="App">
      {/* Fetch data from API */}
      <div>
        <button className="fetch-button" onClick={fetchData}>
          Data1
        </button>
        <button className="fetch-button" onClick={fetchData}>
          Data2
        </button>

        <br />
      </div>

      {/* Display data from API */}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

您可以将 id 作为参数传入 fetchData 函数，如下所示：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import ScotchInfoBar from "./ScotchInfoBar";
import "./styles.css";
function App() {
  const fetchData = async (id) => {
    const response = await axios.get(`https://mocki.io/v1/${id}`);
    console.log(response.data);
  };

  return (
    <div className="App">
      {/* Fetch data from API */}
      <div>
        <button
          className="fetch-button"
          onClick={() => fetchData("4d51be0b-4add-4108-8c30-df4d60e8df54")}
        >
          Data1
        </button>
        <button
          className="fetch-button"
          onClick={() => fetchData("4d51be0b-4add-4108-8c30-df4d60e8df54")}
        >
          Data2
        </button>

        <br />
      </div>

      {/* Display data from API */}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

根据codesandbox 链接，当您单击 URL 时，您没有收到响应，这是由于 CORS 错误。请参阅this for CORS issue。 您可以通过将 API 调用包装在 try-catch 中来检查这一点。

const fetchData = async () => {
    try {
        const response = await axios.get("https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54");
        console.log(response.data);
    }catch (error) {
        console.log(error)
    }
};

来到第二个问题：如何在不同的按钮点击时触发不同的 API？

您可以为按钮的onClick 传递不同的内联函数，例如：

<button
  onClick={onClick={() => fetchData("some-id-1")}}
>
    Button 1
</button>
<button
  onClick={onClick={() => fetchData("some-id-2")}}
>
    Button 2
</button>

并在fetchData 函数中处理这些 id，例如：

const fetchData = async (id) => {
    try {
        const response = await axios.get(`https://mocki.io/v1/${id}`);
        console.log(response.data);
    }catch (error) {
        console.log(error)
    }
};