我有一个应用程序,我在那里使用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)
时我可以看到我不能按照我的要求使用它。
如果你需要更多的澄清,请让我知道。
1条答案
按热度按时间hgb9j2n61#
你犯了一个错误,你在
useEffect
回调函数中定义了getData
,这使得你的函数只能在函数作用域内访问。要解决这个问题,请在
useEffect
回调之外定义函数,这样您就可以在组件中的任何位置使用它。