• 嘿，首先，你必须明白，你必须把数据存储在某个地方，你从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>
  );
}

表单.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;

您也可以访问codesandbox上的工作代码。以下是输出：

您所做的只是将数据记录到控制台（并隐藏一个变量）：

const countries = res.data;
console.log(countries)

如果需要在state中设置数据，请在state中设置它（并且您根本不需要局部变量）：

setCountry(res.data);

您还从<Select>组件中删除了该道具。显然，您需要将其恢复：

<Select options={countries} />

顺便说一句......名字很重要。这里有一个复数不一致的地方：

const [countries, setCountry] = useState([])

最好保持名称的一致性和意义，否则在使用数据时会混淆。由于这是一个值数组，因此请保持复数形式：

const [countries, setCountries] = useState([]);