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

Question

我试图填充我的选择下拉选项与值来自API调用，只要页面加载。目前，只有当您触摸并取消选择select字段时，这些选项才会生成。在页面加载时，这些选项不会被填充，而是空的。我看过其他类似的问题，建议使用react -select包，但我正在寻找一种只用react来做的方法，我没有找到任何解决方案。请建议我如何才能做到这一点或在哪里我可以得到帮助。我在下面附上了我的代码。亲切的问候。

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;