如何在页面加载时从 React js 中的 Api 调用填充 select 选项

Question

我正在尝试使用页面加载后来自 API 调用的值来填充我的 select 下拉选项。目前，这些选项仅在您触摸 select 字段并取消 select 字段后生成。在页面加载时，选项不会被填充并且是空的。我看过其他建议使用 React-select 包的类似问题，但我正在寻找一种方法来做到这一点，但我没有找到解决方案的运气。请告知我如何实现这一目标或在哪里可以获得帮助。我在下面附上了我的代码。亲切的问候。

import { Form } from "react-bootstrap";
import { Field, ErrorMessage } from "formik";
import axios from "axios";

function CompanySelect(props) {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    const opt = [
      {
        key: "Select a company",
        value: "",
      },
    ];

    (async () => {
      const { data } = await axios.get("http://localhost:5000/api/company/");
      data.forEach((value) => {
        opt.push({
          key: value.name,
          value: value.id,
        });
      });
    })();

    setOptions(opt);
  }, []);

  const { label, name, ...rest } = props;

  return (
    <Form.Group className="mb-2">
      <Form.Label htmlFor={name}>{label}</Form.Label>
      <Field id={name} name={name} {...rest} as={Form.Select}>
        {options.map((option) => {
          return (
            <option key={option.value} value={option.value}>
              {option.key}
            </option>
          );
        })}
      </Field>
      <ErrorMessage className="text-danger" name={name} component={Form.Text} />
    </Form.Group>
  );
}

export default CompanySelect;

Answer 1

您在错误的时间更新了您的状态，就在触发异步之后 axios.get 但 结果实际出现之前 。所以当状态更新实际发生时，opt 还不包含从 axios 获取的数据。这是固定版本：

import { Form } from "react-bootstrap";
import { Field, ErrorMessage } from "formik";
import axios from "axios";

function CompanySelect(props) {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    async function fetchData() {
      // Fetch data
      const { data } = await axios.get("http://localhost:5000/api/company/");
      const results = []
      // Store results in the results array
      data.forEach((value) => {
        results.push({
          key: value.name,
          value: value.id,
        });
      });
      // Update the options state
      setOptions([
        {key: 'Select a company', value: ''}, 
        ...results
      ])
    }

    // Trigger the fetch
    fetchData();
  }, []);

  const { label, name, ...rest } = props;

  return (
    <Form.Group className="mb-2">
      <Form.Label htmlFor={name}>{label}</Form.Label>
      <Field id={name} name={name} {...rest} as={Form.Select}>
        {options.map((option) => {
          return (
            <option key={option.value} value={option.value}>
              {option.key}
            </option>
          );
        })}
      </Field>
      <ErrorMessage className="text-danger" name={name} component={Form.Text} />
    </Form.Group>
  );
}

export default CompanySelect;

如何在页面加载时从 React js 中的 Api 调用填充 select 选项

How to populate select options from an Api call in React js on page load

javascript

asynchronous

async-await

reactjs