Question

我在带有php api的React项目中使用axios。我想测试3种api，例如https：///：api1，https：///：api12，https //：api3 我想通过droplist（选择选项）切换这3个api

能给我一些建议或指导，谢谢

Answer 1

逻辑很简单。您有一个字符串数组-api URL。

渲染select标签并填充option从数组中移出的map个孩子。

使用onChnage来监听用户更改选择，获取值并使用axois来调用API。

我添加了pre以显示结果（以证明?）

import React, { useState } from "react";
import axios from "axios";
import "./styles.css";

const apis = [
  "https://reqres.in/api/users?page=1",
  "https://reqres.in/api/users?page=2",
  "https://reqres.in/api/users?page=3"
];

export default function App() {
  const [response, setResponse] = useState("");
  const onChange = async e => {
    const url = e.target.value;
    const data = await axios.get(url);
    setResponse(JSON.stringify(data, null, 2));
  };

  return (
    <div className="App">
      <select onChange={onChange}>
        <option key={-1}>Choose API</option>
        {apis.map(api => (
          <option key={api}>{api}</option>
        ))}
      </select>
      <hr />
      Response:
      <pre style={{ textAlign: "left" }}>{response}</pre>
    </div>
  );
}

https://codesandbox.io/s/wandering-dust-ljr2c?file=/src/App.js

React，Axios，如何从3urls切换请求URL

1 个答案: