React - 使用 useState 钩子时使用 get 请求的无限循环

丹尼尔·R

刚开始对项目做出反应和工作。我有一个组件正在使用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;

我确定我做错了什么,但似乎无法解决。

谢谢。

fjc

通过useEffect无依赖调用,它将在每个渲染周期调用:

useEffect(() => {   
    send(); 
});

要仅在组件初始渲染时执行效果,请添加一个空数组作为依赖项:

useEffect(() => {   
    send(); 
}, []);

更新正如@KausUntwale 指出的那样,您正在函数id内部使用send()要执行send任何时间id更改,请添加id到您的useEffect依赖项:

useEffect(() => {   
    send(); 
}, [id]);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在React中使用钩子时的无限循环

使用 React 中的 useEffect 和 useState 钩子从 get 请求管理数组

使用'useState'钩子时,有什么方法可以使用React DevTools查看React多状态中的'fields'名称

在 HoC 中使用 React 钩子时的警告

在React中使用useState和useEffect的无限循环

使用React钩子时使用打字稿键入组件状态

React Native的多个React版本(使用钩子时)

使用React钩子时如何通知父组件属性更改?

使用React钩子时按索引选择数组中的项

使用React钩子时无法重新渲染引导表

如何在添加依赖项时使用useEffect()钩子时避免无限循环?

使用React useState钩子将键值对添加到循环内的对象

错误:重新渲染过多。React 在使用 useState() 时限制渲染次数以防止无限循环

如何将数组声明为任何数组:使用UseState钩子时?

在反应中使用useState钩子时如何读取更新数组的值?

使用钩子 useState() 的问题

使用 useState React 钩子和调用其他函数

在 React 中使用 useState 钩子获取对象的初始值

React useState钩子如何与可变对象一起使用

使用React钩子useState()键入'setState'函数的正确方法

使用React useState()钩子更新和合并状态对象

React没有使用useState钩子触发重新渲染

使用React useState钩子设置多个状态值

React钩子:如何使用useState()更新嵌套对象上的状态?

如何使用react useState钩子防止竞争条件

如何在React与TypeScript中正确使用useState钩子?

如何使用react钩子useState正确处理动态表单

Reactjs 使用 useState 导致 axios 请求循环

数组不使用useState钩子和for循环更新