我在使用php api的React项目中使用axios。我想测试3个api3,比如https//:api3 1,https//:api3 12,https//:api3 3,我想通过液滴切换这3个api3(选择选项)
你能给我一些建议或指导吗,谢谢
发布于 2020-05-10 17:18:08
逻辑很简单。您有一个字符串数组- api。
呈现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
https://stackoverflow.com/questions/61711360
复制相似问题