[英]Fetch using React Native and useEffect
Attempting to make a call to an API to get some data and store it in my components state.尝试调用 API 以获取一些数据并将其存储在我的组件 state 中。 I am using useEffect
with a []
dependency to fire only once.我使用带有[]
依赖项的useEffect
只触发一次。 The setEntries
line causes Expo to panic and crash on iOS. setEntries
行导致 Expo 在 iOS 上发生恐慌和崩溃。 If I comment that out, I can log and see that the API is returning what I would expect.如果我将其注释掉,我可以登录并看到 API 正在返回我所期望的。 I am wondering if some kind of infinite loop is being kicked off by calling setEntries
but I do not see that happening when I log to the console.我想知道是否通过调用setEntries
启动了某种无限循环,但是当我登录到控制台时我没有看到这种情况发生。
I have also tested adding isLoading
, entries
and isError
to the dependency array to no avail.我还测试了将isLoading
、 entries
和isError
添加到依赖数组中无济于事。
Relevant code below:相关代码如下:
import React, { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, Text } from 'react-native';
import { globalStyles } from '../../../styles';
import Card from '../../shared/components/card';
import { Entry } from '../../shared/models/Entry';
import { REQUEST } from '../../shared/services/networking';
export const EntryList = () => {
const [entries, setEntries] = useState([]);
const [isError, setIsError] = useState(false);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetch(url)
.then((result) => {
setIsLoading(false);
if (result.ok) {
return result.json();
} else {
throw new Error(result.status.toString());
}
})
.then((entries) => {
if (entries) {
setEntries(entries.data.sort((a: Entry, b: Entry) => Date.parse(b.createdAt) - Date.parse(a.createdAt)));
}
})
.catch((e) => {
console.error(e);
setIsError(e);
});
}, []);
return (
<SafeAreaView style={globalStyles.container}>
<ScrollView showsVerticalScrollIndicator={false}>
{isError && <Text>Sorry, we encountered an error.</Text>}
{isLoading && <Text>Loading...</Text>}
{entries && !isLoading ? (
entries.map((entry, i) => <Card entry={entry} key={`entry-${i}`} />)
) : (
<Text>No entries found. Tell us about your day :)</Text>
)}
</ScrollView>
</SafeAreaView>
);
};
EDIT: Some additional detail that is further complicating this issue.编辑:一些额外的细节使这个问题更加复杂。 When I run this code on my MacBook, Expo works properly.当我在 MacBook 上运行此代码时,Expo 工作正常。 When I run the same code on my Linux desktop (Elementary OS), I get the behavior described above.当我在我的 Linux 桌面(基本操作系统)上运行相同的代码时,我得到了上述行为。 Because of this, I have opened an issue with Expo here: https://github.com/expo/expo/issues/11352因此,我在这里打开了 Expo 的问题: https://github.com/expo/expo/issues/11352
I think issue might be because you have same name entries
in your state
and request response in .then((entries) => {...})
.我认为问题可能是因为您在 state 中有相同的名称entries
并在state
.then((entries) => {...})
中请求响应。 Try to change name in your response like response or something like尝试在您的回复中更改名称,例如回复或类似
.then((response) => {
if (response) {
setEntries(response.data.sort((a: Entry, b: Entry) => Date.parse(b.createdAt) - Date.parse(a.createdAt)));
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.