ReactJS Axios，web api被多次调用。
ReactJS Axios，web api被多次调用。
提问于 2021-05-04 23:54:54
下面的代码从web api获取记录。那是工作，我拿回了唯一的记录。但是我不明白为什么WebApi被调用了8次。
你知道为什么吗？
const Customer = () => {
const [httpRequestDone, setHttpRequestDone] = useState(false);
const [data, setData] = useState([]);
if (!httpRequestDone) {
axios({
method: 'get',
url: 'https://localhost:44368/api/Customer/AllCustomers',
})
.then(res => {
console.log(res.data);
setData(res.data);
setHttpRequestDone(true);
});
}
return (
<div className="customer">
<Navigation />
<ul>
{data.map(item => (
<li key={item.customerId}>
<div>{item.customerId}</div>
<div>{item.lastName}</div>
</li>
))}
</ul>
</div>
);
};
export default Customer;回答 2
Stack Overflow用户
回答已采纳
发布于 2021-05-05 00:04:46
与其使用useState挂钩来确定是否应该进行axios调用，不如尝试使用useEffect挂钩。
const Customer = () => {
const [data, setData] = useState([]);
useEffect(() => {
axios({
method: 'get',
url: 'https://localhost:44368/api/Customer/AllCustomers',
})
.then(res => {
setData(res.data);
});
}, [])
return (
<div className="customer">
<Navigation />
<ul>
{data && data.map(item => (
<li key={item.customerId}>
<div>{item.customerId}</div>
<div>{item.lastName}</div>
</li>
))}
</ul>
</div>
);
};
export default Customer;这只会让您的axios在组件挂载时调用一次。
Stack Overflow用户
发布于 2021-05-05 00:04:42
如果你希望获取只发生一次，那么使用useEffect钩子。
const Customer = () => {
const [data, setData] = useState([]);
useEffect(function(){
axios.get('https://localhost:44368/api/Customer/AllCustomers').then(function(res){
setData(res.data);
console.log(res.data);
})
}, [])
return (
<div className="customer">
<Navigation />
<ul>
{data.map(item => (
<li key={item.customerId}>
<div>{item.customerId}</div>
<div>{item.lastName}</div>
</li>
))}
</ul>
</div>
);
};
export default Customer;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67388116
复制相关文章
相似问题
腾讯云开发者
