reactjs - 具有多个 API 调用的 React 函数
问题描述
在我的反应应用程序中的一个组件的代码下方。以下代码有多个问题并且效率非常低 - 我想讨论一下:
- 异步 API 调用彼此紧密耦合,这绝对不是最佳实践,那么如何改进呢?
- 如何在不使用 useEffect() 的情况下将userName传递给fetchSubs,或者我在这里以错误的方式使用 useEffect?
- 由于第二点的问题,我正在考虑使用经典的反应类是否更好,并且状态管理看起来不是很好。
在此先感谢,我很高兴与您讨论此代码。(我想,我做错了一些事情)
import React, { useState, useEffect } from 'react';
import { API,Auth, graphqlOperation } from 'aws-amplify';
import * as queries from '../../graphql/queries';
import * as subscriptionsgraph from '../../graphql/subscriptions'
import { Grid, Table } from 'semantic-ui-react';
function listReservations() {
const [reservations, setReservations] = useState([]);
const [userName, setUserName] = useState([]);
useEffect(() => {
fetchUser();
fetchSubs(userName);
},[userName]);
// get username
const fetchUser = async () => {
await Auth.currentAuthenticatedUser()
.then(user => {
setUserName(user.username);
}).catch(err => {
console.log('error: ', err)
});
}
// get subs
const fetchSubs = async(userName) => {
const limit = 100;
API.graphql(graphqlOperation(queries.searchSubtos, {
limit,
input: { owner: userName }
})).then(payload => {
const data = payload.data.searchSubtos.items;
fetchReservations(data); // get Reservations
}).catch(err => {
console.log('error: ', err)
});
}
// get Reservations
const fetchReservations = async (data) => {
const limit = 100;
data.forEach(async (item) => {
console.log(item.location);
await API.graphql(graphqlOperation(queries.searchReservations, {
limit,
sort: {
field: 'startDate',
direction: 'asc'
},
filter: {
location: {
eq: item.location
}
}
}
)).then(payload => {
const data = payload.data.searchReservations.items
setReservations(data);
}).catch(err => {
console.log('error: ', err)
});
});
}
return (
<div>
<Grid centered style={{ marginTop: '15px' }}>
<Grid.Row>
<Grid.Column width={12}>
<Table celled striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell colSpan="3">City </Table.HeaderCell>
<Table.HeaderCell colSpan="3">Location</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{ reservations.map((rest, i) => (
<Table.Row key={i}>
<Table.Cell colSpan="3">{rest.city}</Table.Cell>
<Table.Cell colSpan="3">{rest.location}</Table.Cell>
</Table.Row>
))
}
</Table.Body>
</Table>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
);
}
export default listReservations;
解决方案
首先,如果您没有用户名数组,则更改用户名的初始值,例如:
const [userName, setUserName] = useState(null);
然后,使用它在页面加载时获取用户名:
useEffect(() => {
fetchUser();
},[]);
再放 1 个useEffect
函数,在获取有效用户名后获取潜艇
useEffect(() => {
if (username) fetchSubs(username);
},[username]);
推荐阅读
- java - 如何在硒的模态上选择元素进行反应选择
- java - 从派生类的实例访问基类方法
- spring-boot - Spring Security WebFlux 和 LDAP
- java - Spring 反应式测试用例
- android - Android:如何在本地存储中隐藏我的 SQLite 数据库?
- c# - 如何在 C# windows 窗体应用程序的 report1.rdlc 文件中将 winForm 文本框值获取到文本框
- c# - Outlook 2016 VSTO 文件夹添加项目事件仅触发一次
- python - Fabric1 env.hosts 和 env.hosts_name 的 fabric2 替代品是什么
- mariadb - MariaDB Galera 安装
- r - 创建具有不同间隔宽度且图例级别之间没有间距的离散颜色条