reactjs - ReactJS：使用 AXIOS 进行 API 调用并在选择中使用

Question

我正在尝试进行 api 调用并在选择中使用它，但我的选择是空的

const [intergrationLevel, setIntegrationLevel] = useState<any>(null);

useEffect(() => {
    async function fectIntegrationLevel() {
      let response = await fetch('.../api/integrations');
      response = await response.json();
      setIntegrationLevel(response);
    }
    fectIntegrationLevel();
    if (isNew) {
      props.reset();
    } else {
      props.getEntity(props.match.params.id);
    }
  }, []);

  console.log('intergrationLevel', intergrationLevel);
return (
//...

<div className="col-md-4">
                      <AvGroup>
                        <Label>Level</Label>
                        <AvInput
                          id="integration-level"
                          data-cy="integration-level"
                          type="select"
                          className="form-control"
                          name="realm"
                        />
                        {intergrationLevel
                          ? intergrationLevel.map(int => (
                              <option value={int.cod} key={int.cod}>
                                {int.cod}
                              </option>
                            ))
                          : null}
                      </AvGroup>

我的 console.log(integrationLevel) 开头为 null （这应该是问题所在），然后它被填充，但选择 no。我能怎么做？

编辑解释：

我会进行 api 调用来检索数据列表，并使用表单中选择中的数据来发出请求..

我试图进行这个 api 调用，并且我已经使用了 setIntegrationLevel(response);在 intergrationLevel 中保存列表，但是当我在我的选择上使用 intergrationLevel 时，这个 intergrationLevel 是空的（可能是因为当返回开始时 api 调用没有结束）

EDIT2：（用选择包装）

编辑3：

现在的情况是：

标签： reactjs

Answer 1

您没有在完成网络调用时渲染您的组件。这就是为什么我在依赖数组中添加值

const [intergrationLevel, setIntegrationLevel] = useState<any>(null); 
async function fectIntegrationLevel() {
      let response = await fetch('.../api/integrations');
      response = await response.json();
      setIntegrationLevel(response);
    }
useEffect(() => {
    if (!intergrationLevel){
    fectIntegrationLevel();
    }
    
    if (isNew) {
      props.reset();
    } else {
      props.getEntity(props.match.params.id);
    }
  }, [intergrationLevel]);

  console.log('intergrationLevel', intergrationLevel);
return (
//...

<div className="col-md-4">
                      <AvGroup>
                        <Label>Level</Label>
                        <AvInput
                          id="integration-level"
                          data-cy="integration-level"
                          type="select"
                          className="form-control"
                          name="realm"
                        />
                        {intergrationLevel
                          ? intergrationLevel.map(int => (
                              <option value={int.cod} key={int.cod}>
                                {int.cod}
                              </option>
                            ))
                          : null}
                      </AvGroup>