因此，我正在嘗試向我的 React-Select 組件顯示 Amazon 國家/地區 API，并且我嘗試以多種不同的方式執行此操作，但結果我的 Select 組件上只會出現空白頁或白名單
下面的代碼只有Axios方法呼叫API。
我應該怎么做才能在 Select 組件上顯示 API 資料？
這是我的 Form.jsx 組件：
import { useState, useEffect } from 'react';
import '../App.css';
import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';
import Select from 'react-select';
import Axios from 'axios';
function Forms() {
const [countries, setCountry] = useState([])
Axios.get(`https://amazon-api.sellead.com/country`)
.then(res => {
const countries = res.data;
console.log(countries)
})
return (
<Form>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridEmail">
<Form.Control type="text" name = "name" placeholder="Nome" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Control type="email" name = "email" placeholder="E-mail" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Control type="text" name = "cpf" placeholder="CPF" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Control type="text" name = "tel" placeholder="Telefone" />
</Form.Group>
<Form.Label>País</Form.Label>
<Form.Group as={Col} controlId="formGridPassword">
<Select
/>
</Form.Group>
<Form.Label>Cidade</Form.Label>
<Form.Group as={Col} controlId="formGridPassword"> <br/>
<Select
/>
</Form.Group>
<Button variant="primary" type="submit">
Enviar
</Button>
</Row>
</Form>
);
}
export default Forms;
uj5u.com熱心網友回復：
- 嘿，首先，您必須了解您必須將該資料存盤在某個地方，即您從 API 接收到的資料。
- 存盤后，您只需將其更新為
useState([]). 你創造的。 - 現在，您呼叫的這個 API 必須只呼叫一次，所以我們只需要
useEffect()使用一個空陣列作為依賴項進行掛鉤，[]因此它只會在初始渲染時呼叫一次處理 API 的函式。 - 獲得資料后，只需使用 map 函式遍歷它并呈現選項。
- 這是代碼。
應用程式.js
import "./styles.css";
import Forms from "./Forms.js";
export default function App() {
return (
<div className="App">
<Forms />
</div>
);
}
Forms.js
import { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Button from "react-bootstrap/Button";
import Select from "react-select";
import Axios from "axios";
function Forms() {
// creating an useState for setting country list received from api
const [countriesList, setCountriesLits] = useState([]);
//async funtion that handling api
const getCountries = async () => {
let contries = []; // to store api data
const countryRes = await Axios.get(
`https://amazon-api.sellead.com/country`
);
countryRes.data.forEach((data) => {
contries.push(data.name);
});
// updating state
setCountriesLits(contries);
};
const handleChange = (e) => {
alert(e.target.value);
};
useEffect(() => {
getCountries();
}, []);
return (
<Form>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridEmail">
<Form.Control type="text" name="name" placeholder="Nome" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Control type="email" name="email" placeholder="E-mail" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Control type="text" name="cpf" placeholder="CPF" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Control type="text" name="tel" placeholder="Telefone" />
</Form.Group>
<Form.Label>País</Form.Label>
<Form.Group as={Col} controlId="formGridPassword">
<select onChange={handleChange}>
{/* rendering option from the state countriesList */}
{countriesList.map((data, i) => (
<option key={i} value={data}>
{data}
</option>
))}
</select>
</Form.Group>
<Form.Label>Cidade</Form.Label>
<Form.Group as={Col} controlId="formGridPassword">
{" "}
<br />
<Select />
</Form.Group>
<Button variant="primary" type="submit">
Enviar
</Button>
</Row>
</Form>
);
}
export default Forms;
uj5u.com熱心網友回復：
您所做的只是將資料記錄到控制臺（并隱藏變數）：
const countries = res.data;
console.log(countries)
如果需要在 state 中設定資料，請將其設定在 state 中（并且您根本不需要區域變數）：
setCountry(res.data);
您還從<Select>組件中洗掉了道具。顯然，您需要回傳：
<Select options={countries} />
順便說一句……名字很重要。這里有一個復數不一致的地方：
const [countries, setCountry] = useState([])
最好保持您的名稱一致且有意義，否則當您嘗試使用這些資料時，您最終會感到困惑。由于這是一個值陣列，請保持復數：
const [countries, setCountries] = useState([]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/522650.html
標籤：反应apiaxios