我有一个应用程序，我在那里使用API，它需要有动态路由（不确定，如果我使用正确的术语），使用该API，我需要从用户那里获得输入，并根据输入，我必须呈现表。
该路由将类似于URL = http：//localhost：8080/creds？id ={my_id}
我的准则是-

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const baseURL = "http://localhost:8080/creds?id=";

const Demo = () => {
    const [data, setData] : any = useState([]);
    const [input, setInput] : any = useState("");
    
 useEffect(() => {
        const getData = async (my_id) => {
            const endpoint = `${baseURL}${my_id}`;
            const response = await axios.get(endpoint)
            setData(response.data)
            console.log(data) // this shows the output json, but I cannot use it outside the useEffect
        };
        getData(input);
    }, []);

 const handleInput = (e: any) => {
        let value = e.target.value;
        setInput(value);
    };
 const handleClick = () => {
        getData(input)
    }

return (
     <div>
             <input type='text' value={input} onChange={handleInput} />
             <button onClick={handleClick}>search</button>
     </div>
    )
}

第一个错误是我不能使用getData，ts说它找不到它。如何使用这个函数，在useEffect之外？我想使用json，当我console.log(data)时我可以看到我不能按照我的要求使用它。
如果你需要更多的澄清，请让我知道。