0
178
VistasLos datos de usuario de DynamoDB se procesan demasiado tarde al llamarlos
Así que estoy tratando de obtener una lista de amigos de los usuarios de un dynamoDB . Estoy usando una API de GraphQL para acceder a mi base de datos. En la sección comentada del código proporcionado allí, menciono que probé users[1].friends.map , que devuelve la matriz de lista de amigos correcta, pero los usuarios no parecen configurarse hasta después de que se haya procesado la lista de amigos. ¿Cómo debo configurar mi código para que la lista de amigos correcta (que se encuentra en los usuarios) se muestre la primera vez que se muestre la página en lugar de después de que se actualice?
const FriendsList = [ { name: 'Name 1', }, { name: 'Name 2', }, { name: 'Name 3', }, { name: 'Name 4', }, { name: 'Name 5', }, { name: 'Name 6', }, ]; const Friends = (props) => { const [refreshing, setRefreshing] = React.useState(false); const [users, setUsers] = React.useState([]); const [formData, setFormData] = React.useState(initialFormState); React.useEffect(() => { fetchUserData(); }, []); async function fetchUserData() { const userData = await API.graphql({ query: listUsers }); setUsers(userData.data.listUsers.items); } //console.log(users); const renderFriendsList = (props) => { /* *Here I want to have something like... * return users[1].friends.map((item, i) => { * so I can iterate through the friends list */ return FriendsList.map ((item, i) => { return ( <View style={{ paddingLeft: scale(10), paddingRight: scale(10) }}> <View style={{ backgroundColor: '#d1cfcf', width: scale(330), height: scale(85), borderRadius: scale(10), flexDirection: 'row', borderColor: '#8f8a8a', borderBottomWidth: 1, }}> <View> <Text style={{ fontSize: 15 }}>{item.name}</Text> </View> </View> </View> ); }); }; return ( <View style={{}}> <View style={{ marginTop: scale(5) }}> {renderFriendsList()} </View> </View> ); } fetchUserData() debe configurar users en los datos del usuario, pero cuando llamo a los usuarios antes de la primera vez que se procesa, los usuarios aún no están definidos. Si la aplicación se está ejecutando y ha renderizado la lista de amigos de friendsList, y luego la cambio a usuarios 1 .friends sobre la marcha, funciona, pero eso obviamente es un problema porque no se renderiza correctamente la primera vez. Uso React.useEffect() y pensé que llamaría a fetchUserData() cuando se renderice la página.
Aquí está el resultado que obtengo cuando console.log(users.result)
1 Respuestas
Responde la pregunta0
useEffect con una matriz vacía como argumento se llama después del procesamiento inicial, este es un comportamiento normal.
Por lo general, cuando desea representar el estado relacionado con una llamada API, lo almacenaría en forma de algo como esto:
const defaultState = { loading: false, result: null, error: null }; const [users, setUsers] = useState(defaultState);Por lo tanto, puedes hacer algo como esto:
async function fetchUserData() { setUsers({ ...defaultState, loading: true }); try { const userData = await API.graphql({ query: listUsers }); setUsers({ ...defaultState, result: userData.data.listUsers.items}); } catch (e) { setUsers({ ...defaultState, error: e.message }); }; } Dado que está realizando una llamada remota, tiene sentido mostrar un control giratorio durante el tiempo de carga, en lugar de representar la colección de inmediato.
Por lo tanto, puede usar la propiedad de loading en el objeto de estado para este propósito.
Por supuesto, existen otras técnicas en las que inmediatamente realiza la llamada ajax en el servidor y las envía como json al cliente de inmediato, o simplemente procesa el html desde el servidor.
Editar: según la solución actual, puede hacer:
... return ( <> { loading && <>loading...</> } { !loading && result && <FriendList result={ result } /> // map now that the results are available } </> )