在地图功能中调用API

Question

我是我想在地图功能中调用API的应用程序的新手，我认为我必须在该应用程序中调用API。

首先，我调用一个API，该API返回以这样的kendo表单渲染的元素列表：

import { Form, Field, FormElement } from "@progress/kendo-react-form";
...
const [tempAtr, setTempAtr] = useState([]);
...
const resAtr = await services.getTemplateSessionAtributi(sesijaV);
setTempAtr(resAtr.data.rlista); //tempAtr is filled with a list of elements (attributes)
...
{tempAtr.map((data) =>
<Field
                required={data.required=== 1 ? true : false}
                disabled={data.read_only === 1 ? true : false}
                name={data.name}
                component={ 
                      data.tpodatka_id === 1 ?Input: 
                      data.tpodatka_id === 2 ?Input: 
                      data.tpodatka_id === 3 ?DatePicker: 
                      data.tpodatka_id === 4 ?DropDownList:
                      data.tpodatka_id === 5 ?TextArea :
                      data.tpodatka_id === 6 ?DropDownList:
                      data.tpodatka_id === 7 ?DropDownList:
                      data.tpodatka_id === 8 ?MultiSelect:
                      data.tpodatka_id === 9 ?MultiSelect:
                      Input}
                label={data.name}
                data={ 
                      
                      data.tpodatka_id === (4 || 6 || 7 || 8 || 9) ? 

**call an API and fetch data to fill the dropdown for that specific attribute id ** : 
                      null
                }
                textField={data.tpodatka_id === (4 || 6 || 7 || 8 || 9) ? "name" : null}
                dataItemKey={data.tpodatka_id === (4 || 6 || 7 || 8 || 9) ? "id" : null}
              />)}

因此，在数据部分中，我必须将attribut_id的API称为一个参数知道该怎么做？可以有一个下拉属性的1或5或15，因此，我唯一能想到的就是调用映射功能中的API并在返回时分配值。

帮助任何人？

Answer 1

最佳选择是提取下拉单独的React组件＆amp;在其使用中进行API调用。您可以将 id 作为道具传递。示例（）

import React from "react";
import "./styles.css";

function YearDropDown(props) {
  const [loading, setLoading] = React.useState(true);
  const [items, setItems] = React.useState([]);
  const [value, setValue] = React.useState("2013");
  const { drilldowns } = props;
  React.useEffect(() => {
    let unmounted = false;
    async function getCharacters() {
      const response = await fetch(
        `https://datausa.io/api/data?drilldowns=${drilldowns}&measures=Population`
      );
      const body = await response.json();
      if (!unmounted) {
        setItems(body.data.map(({ Year }) => ({ label: Year, value: Year })));
        setLoading(false);
      }
    }
    getCharacters();
    return () => {
      unmounted = true;
    };
  }, [drilldowns]);

  return (
    <select
      disabled={loading}
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
    >
      {items.map(({ label, value }) => (
        <option key={value} value={value}>
          {label}
        </option>
      ))}
    </select>
  );
}

export default function App() {
  return (
    <div className="App">
      <YearDropDown drilldowns="Nation" />
    </div>
  );
}