ReactJS Axios，web api被多次调用。
ReactJS Axios，web api被多次调用。
提问于 2021-05-04 15: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-04 16: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-04 16: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
复制
相似问题
如果定义了对象，则有条件地呈现该对象；如果该对象未定义，则会发出警告
如果关联的对象存在，则呈现该对象
如果对象在Rails中为nil，我如何跳过一段代码？
如果该对象的列表为空，如何从列表中删除该对象？(Python3)
如果，否则，elsif，否则如果只显示对象时，不为空
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
