刚开始对项目做出反应和工作。我有一个组件正在使用GET
来自后端的请求。除了我尝试保存response data
使用外,所有似乎都正常工作useState() hook
每当我尝试使用数据 setCompany 时,我都会在检查控制台日志时遇到无限循环。
没有设置 Company 这不会发生。
我似乎无法在其他帖子上找到正确答案。
组件:接口 GetOneCompanyProps {
company: CompanyModel;
}
interface RouteParam {
id: any;
}
interface CompanyById extends RouteComponentProps<RouteParam> {
}
function GetOneCompany(props: GetOneCompanyProps): JSX.Element {
const [id, setId] = useState('1');
const [company, setCompany] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
console.log(id)
}
async function send() {
try {
const response = await axios.get<any>(globals.adminUrls.getOneCompany + id)
store.dispatch(oneCompanyAction(response.data) );
console.log(response);
const company = response.data;
setCompany(company);
} catch (err) {
notify.error(err);
}
}
useEffect(() => {
send();
});
return (
<div className="getOneCompany">
<h1>hi </h1>
<form onSubmit={handleSubmit}>
<label>Company ID</label>
<input value={id} onChange={(e) => setId(e.target.value)} type="number"/>
<input type="submit" value="Search "/>
</form>
<div>
</div>
</div>
);
}
export default GetOneCompany;
我确定我做错了什么,但似乎无法解决。
谢谢。
通过useEffect
无依赖调用,它将在每个渲染周期调用:
useEffect(() => {
send();
});
要仅在组件初始渲染时执行效果,请添加一个空数组作为依赖项:
useEffect(() => {
send();
}, []);
更新正如@KausUntwale 指出的那样,您正在函数id
内部使用send()
。要执行send
任何时间id
更改,请添加id
到您的useEffect
依赖项:
useEffect(() => {
send();
}, [id]);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句