reactjs 在Axios中使用动态API路由,在React中使用Input呈现一个表

xxls0lw8  于 2023-04-11  发布在  React
关注(0)|答案(1)|浏览(121)

我有一个应用程序,我在那里使用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)时我可以看到我不能按照我的要求使用它。
如果你需要更多的澄清,请让我知道。

hgb9j2n6

hgb9j2n61#

你犯了一个错误,你在useEffect回调函数中定义了getData,这使得你的函数只能在函数作用域内访问。
要解决这个问题,请在useEffect回调之外定义函数,这样您就可以在组件中的任何位置使用它。

相关问题