引发错误时，React-native fetch to setState失败
当在React Native中使用fetch方法时，如果在请求过程中发生错误导致无法更新组件的状态（setState失败），可能有以下几个原因和解决方法：
- 网络连接问题：确保设备正常连接到网络，并且可以访问目标API。可以尝试在浏览器中访问API的URL，以确认是否能够正常获取数据。
- API响应问题：检查API的响应是否符合预期。可以使用工具如Postman或curl来发送请求并检查响应的内容和格式是否正确。
- 异步操作问题：fetch方法是一个异步操作，可能会导致在setState之前组件已经被卸载或卸载中。可以使用async/await或Promise来确保在处理完fetch请求后再进行setState操作。
- 错误处理问题：在fetch请求中添加错误处理机制，以便能够捕获和处理错误。可以使用try/catch语句或.then()中的错误回调来处理fetch请求中的错误。
- 组件状态更新问题：确保在setState之前组件的状态是可变的。如果组件的状态是不可变的（immutable），则无法通过setState来更新状态。可以使用第三方库如Immutable.js来处理不可变状态。
- 调试工具问题：使用调试工具来检查代码中的错误。React Native提供了一些调试工具，如React Native Debugger和Reactotron，可以帮助定位和解决问题。
总结起来，当React Native中的fetch方法导致setState失败时，需要检查网络连接、API响应、异步操作、错误处理、组件状态更新和调试工具等方面的问题。根据具体情况进行排查和解决。
相关·内容
我正在尝试访问本地机器上的远程HTTP。这个API在邮递员和我的本地机器的Chrome上运行得很好。但是，在使用世博进行提取调用时，使用本机获取响应时，我会得到以下错误：
网络请求失败
node_modules\whatwg-fetch\dist\fetch.umd.js:473:29 in xhr.onerror node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
node_modules\react-native\Libraries\Ne
浏览 1提问于2020-03-25得票数 1
我正在使用REST从服务器获取数据，并且我希望在Reacti原住民中的多个选择器中设置该数据，但是我得到了一个错误。以下是服务器的响应：
[
{
"id": 22,
"name": "Business",
"slug": "business"
},
{
"id": 17,
"name": "Digital Marketing",
"slug": "digital-marketing&#
浏览 0提问于2019-06-17得票数 0
2回答
我有一个方法如下：
if response.fetch('ok')
response.fetch(response_key) { [] }
elsif response.fetch('error') == 'token_revoked'
ErrorReporter.increment('access_revoked', source: { account_id: account_id }, sporadic: true)
fail(RemoteService::AccessRevoked, '
浏览 1提问于2017-12-05得票数 0
回答已采纳
我正在考虑流控制的最佳实践。我该往哪边走呢?
1)不要检查任何东西，让程序失败(更干净的代码，自然的错误消息)：
def self.fetch(feed_id)
feed = Feed.find(feed_id)
feed.fetch
end
2)通过返回nil来悄悄地失败(然而，"Clean Code“说，您永远不应该返回null)：
def self.fetch(feed_id)
return unless feed_id
feed = Feed.find(feed_id)
return unless feed
feed.
浏览 4提问于2012-06-02得票数 5
回答已采纳
我有一个节点后端，我的世博应用正在查询。节点快速-mongo后端工作非常完美，我可以使用邮递员的GET请求进行验证，但我得到了未处理的承诺拒绝网络失败的错误在我的应用程序
完全错误：
[Unhandled promise rejection: TypeError: Network request failed]
- node_modules/whatwg-fetch/dist/fetch.umd.js:473:29 in xhr.onerror
- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventT
浏览 4提问于2020-05-26得票数 11
在react-native fetch中，下面代码片段中的then(res => res.json())是什么意思？
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
data: res,
error: res.error || null,
loading: false
});
浏览 1提问于2017-10-05得票数 8
回答已采纳
1回答
作为一个快速总结，我尝试从一个URL中获取，并使用两个参数来完成。我没有使用javascript的经验，所以我尝试这样做： componentDidMount() {
$input = array("team" => {teamName}, "name" => {userPrincipalName});
fetch("http://localhost/openims/json.php?function=getDocuments&input=".urlencode(json_encode($input)))
浏览 15提问于2021-06-28得票数 0
2回答
当执行发送给我以下错误时，您知道我做错了什么吗？我使用了已发布的代码
不变冲突:元素类型无效:需要字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查FlatListDemo的呈现方法。
此错误位于: in FlatListDemo (at withExpoRoot.js:22) in RootErrorBoundary (at withExpoRoot.js:21) in ExpoRootComponent (at renderApplication.js:34) in RCTView (at
浏览 1提问于2019-01-31得票数 1
回答已采纳
我正在尝试在react-native中使用FETCH发布一个请求。但是，请求失败时有时会抛出以下消息: TypeError: Network request failed。我用来发送POST请求的代码如下：
fetch(query,{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlen
浏览 0提问于2016-03-19得票数 1
1回答
我正在尝试执行从Expo (React-Native)应用程序到运行在我的PC上的node.js服务器的超文本传输协议请求，但是我遇到了一些问题。我使用ngrok来公开localhost，并在fetch中使用ngrok服务器，但在POST请求时，我继续收到网络请求失败。 我正在创建服务器，如下所示： app.listen(process.env.PORT, () => {
console.log(`Application is listening on ${process.env.PORT}`);
(async function () {
const endpoint
浏览 29提问于2020-08-11得票数 1
回答已采纳
3回答
我一直试图从我的spring引导本地主机restapi中获取一些值。它正在引发网络错误。我也尝试过用Axios.get()进行提取，但是没有结果，我在我的springboot类和方法中也给出了CORS(源文件=‘*’)。
async componentDidMount()
{
const response = await fetch('http://localhost:8080/jobSeeker/allJobSeekers');
const body = await response.json();
this.setState({ users:
浏览 2提问于2019-08-19得票数 0
我在app.js中有一个组件，它调用另一个JavaScript文件client.js中的函数，我希望在createTimer函数失败且checkStatus抛出错误时将showError的状态设置为true。这样，当函数失败时，我可以显示ErrorSegment。
我得到的错误是：client.js:93 Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined
当createTimer函数失败时，如何显示错误段？
另外一个问题是，我如何在5秒后或每当我执行另一个操作后有效地将状态
浏览 0提问于2016-09-06得票数 0
回答已采纳
2回答
我正在尝试从本地服务器获取数据，但连接本地服务器失败。我面临“网络请求失败”
const testScreen= async ()=> {
await fetch("http://192.168.56.1:3000/comments")
.then((response)=>{
console.log(response.json())
})
.catch((error)=>{
console.
浏览 1提问于2021-04-21得票数 0
2回答
无法为react-native捆绑js脚本。Metro bundler在显示此错误时突然开始失败。我删除了node_modules并运行了npm i，但仍然得到这个错误。
浏览 2提问于2018-05-17得票数 0
我是新的反应本地人和ES6。我可以在这个代码中访问外部作用域“this”：
my_function()
{
this.setState = {};//outer scope this
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => {
console.log(this); //this shows the correct outer scope this
return response
浏览 0提问于2018-06-08得票数 0
回答已采纳
背景
我正在尝试使用React Native组件中的fetch()函数来处理错误的HTTP响应。我使用了中的代码，该代码建议创建一个模块来处理响应错误。
// ApiUtils.js
var ApiUtils = {
checkStatus: function(response) {
if (response.status >= 200 && response.status < 300) {
return response;
} else {
let error = new Error(response.status
浏览 18提问于2016-09-25得票数 2
回答已采纳
**我正在尝试在react-native中构建一个注册页面，该页面将数据发送到API。每当我尝试填写表单并发送请求时，模拟器工作正常，但实际的android设备显示网络请求失败错误。我几乎读过所有相关的答案，但似乎没有一个对我有帮助。我正在使用Android 7.0 API level 24。下面附加的代码。我在清单文件中启用了internet权限。**
fetchRegister(){
var object = {
method: 'POST',
headers: {
'Accept': 'applica
浏览 2提问于2018-07-12得票数 0
回答已采纳
网络请求失败 我曾尝试通过sudo ufw allow to any port命令连接端口，但没有帮助 fetch('http://192.XXXXXX//form/user_registration.php',
{
method: 'POST',
headers:
{
'Accept': 'application/json',
'Content-Type': &
浏览 43提问于2019-07-03得票数 0
回答已采纳
我使用rn-fetch-blob包从url下载文件。但是在运行代码时，它在android上抛出一个错误:执行任务失败':rn-fetch-blob:compileDebugJavaWithJavac‘。
在终端中:在此版本中使用了不推荐使用的Gradle功能，这使得它与Gradle 6.0不兼容。
这是我的代码：
import React, { Component } from "react";
import {
View,
Text,
Button,
Alert,
ProgressBarAndroid,
ToastAndroid,
Perm
浏览 35提问于2019-07-11得票数 1
回答已采纳
我是第一次接触react-native。我现在尝试使用Laravel API设置react-native的登录。我使用的API已经测试过了，并且它的工作原理。但是，当我尝试放入react-native时，它在我调用API时显示了错误。模拟器中的警告是:可能未处理的承诺拒绝(id:0)：TypeError:网络请求失败 这是我的代码。 import React, { Component } from 'react';
import {
StyleSheet,
View,
TextInput,
Text,
TouchableOpacity,
浏览 21提问于2020-04-02得票数 1
回答已采纳
我使用Django rest框架构建了django API。并且希望在我的本机应用程序中访问api的json响应数据。但是一个get错误(网络请求失败了)
DJANGO响应
反应-本机
误差
网络请求失败
node_modules/whatwg-fetch/dist/fetch.umd.js:505:17 in setTimeout$argument_
node_modules/react-native/Libraries/Core/Timers/JSTimers.js:135:14 in _callTimer
node_modules/react-native
浏览 3提问于2020-08-01得票数 1
2回答
我有以下问题。我通过向本地计算机上运行的服务器发出api请求来获取数据。服务器是用ASP.NET编写的。我知道当我使用模拟器时，当我必须向本地主机发出请求时，我应该把我的Ip地址放在本地计算机上，而不是模拟器。即使我更改到正确的ip地址，我仍然有错误‘网络请求失败’
这是我获取数据的代码
componentDidMount() {
fetch('http://IpAdress:54372/api/cars')
.then((response) => response.json())
.then((respo
浏览 2提问于2018-05-01得票数 0
1回答
网络请求获取世博会失败
、、、、
当我试图向我的API发出请求并检索结果时，我目前面临着一个关于fetch函数的问题。这以前从来没有发生过，只是在几周前才开始这样。这就是我得到的错误。 [Unhandled promise rejection: TypeError: Network request failed]
- node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTim
浏览 18提问于2021-01-06得票数 2
回答已采纳
使用setState()出现奇怪的错误时，总是没有任何设置为状态：
错误码：
TypeError:无法读取未定义(…)的属性“setState”
class HelloWorld extends React.Component {
constructor() {
super();
this.state = {listings:[]};
};
componentDidMount (){
fetch('./javascripts/data.json').then(function(response) {
return response.js
浏览 6提问于2016-06-23得票数 2
回答已采纳
我创建了一个简单的函数来通过用户存储的令牌对用户进行身份验证，该函数基于一个承诺，如果它成功地连接到我们的服务器API，它将返回一个包含用户详细信息的响应；如果存在服务器连接，它将通过rejection本机获取方法返回一个带有指定错误的承诺拒绝。
import React, { Component } from 'react';
import {
Text,
View,
AlertIOS,
} from 'react-native';
function AuthAPI(token)
{
return new Promise((r
浏览 1提问于2018-01-19得票数 0
回答已采纳
对于如何正确地使用提供的Fetch API，我是新的反应本机和困惑。
调用本身(如这里概述的：)很简单，我可以注销一个成功的响应，但是当需要呈现数据时，它是未定义的。
我希望我可以定义一个空的“movies”数组，然后从componentDidMount()调用'setState‘来替换它，这将触发一个重呈现。这个假设是否不正确？
下面的代码示例导致以下错误：
“未定义”不是对象(计算'allRowIDs.length')
提前感谢您的帮助！
import React, { Component } from 'react';
import { A
浏览 5提问于2016-11-21得票数 1
回答已采纳
我正在使用世博会创建一个反应本机应用程序。我正在使用与.Net一起运行的localhost API。
web版本运行良好，但是当我尝试在android仿真器上使用我的应用程序时，我会得到以下错误：
Network request failed
at node_modules\whatwg-fetch\dist\fetch.umd.js:535:17 in setTimeout$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:123:14 in _callTimer
at node_modules
浏览 3提问于2021-12-20得票数 1
我有一个注册服务，由Nodejs处理。此服务在3001端口上工作。我试图将此服务从React本机应用程序连接起来。但总是会回来
ReactNativeJS: TypeError:网络请求失败
我的组件和package.json代码如下。另外，我将URL localhost替换为127.0.0.1，它无法工作。当我从邮递员那里测试后端服务时，它是正常工作的。给出了非常常见的异常网络错误，所以很难理解问题的根源。每个本地开发启动程序都可以很容易地面对这个问题。那么，反应本机还是Android引起的问题呢？
import React, { Component } from 'reac
浏览 2提问于2018-03-10得票数 11
回答已采纳
2回答
如何从外层方法获取变量 尝试在React-Native应用程序的外层使用变量 updateCheckBox() {
Constants.TABS.map((item) => {//Constants.TABS is an array
AsyncStorage.getItem(item)//using item as key to fetch from AsyncStorage
.then((res) => {
if(res == 1) {
浏览 34提问于2019-08-29得票数 0
当使用expo在android设备上运行我的react原生应用程序时，api响应不会到来，这是使用fetch和POST方法完成的，并得到以下错误：
未处理的promise rejection: node_modules\whatwg-fetch\dist\fetch.umd.js:535:17在node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14在node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16在node_modules\react
浏览 3提问于2021-07-22得票数 0
为了了解react-native，我正在尝试构建一个简单的应用程序。
这个应用程序最初打印"HELLO WORLD"，然后用它获取的一个json文件的内容替换这个文本(在我的测试中，它包含{'Goodbye':'World'})。
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
} from 'react-native';
class FetchTextTest extends React.Comp
浏览 1提问于2017-05-02得票数 1
回答已采纳
今天，我决定在我的项目中更新react原生包.
npm install react-native@0.22.2
现在我在android上有个错误..。
NetInfo.getCurrentConnectivity got 0 arguments, expected 2
它在这个简单的代码上失败了。
NetInfo.isConnected.fetch().then(isConnected => {
console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});
这
浏览 2提问于2016-03-31得票数 2
回答已采纳
每次操作中的fetch请求失败/抛出错误时，只调用一次changeIsSavedStatus()的正确方法是什么？
removeSavedDeals = () => {
this.changeIsSavedStatus();
//This Statement makes a fetch request and sets removeSelectedSavedDeals_ErrorStatus to true if error occurs
this.props.removeSelectedSavedDeals([this.props.navigation.get
浏览 0提问于2018-07-26得票数 0
我正在“react”上开发一个react-native应用："16.8.3"，"react-native"："0.59.1“ 我在一些远程服务器上发布了应用程序接口，同时获取它提供给我的那些应用程序接口TypeError:网络请求错误 虽然我的api在邮递员上工作正常 await fetch(
"https://57.17.239.178:8087/api/accounts/Login",
{
method: "POST",
headers: {
浏览 14提问于2019-05-17得票数 0
我有一个ActivityIndicator，它在fetch加载时显示，当componentDidMount被触发时车轮消失，但是在布局中保留和空块空间。我猜如何卸载这个组件，但是任何东西都对我有用。
我目前正在使用这些版本：
react-native-cli: 2.0.1
react-native: 0.40.0
这是我使用的代码的一部分：
import React, { Component } from 'react';
import {
StyleSheet,
View,
... // Couple more components here
Activity
浏览 4提问于2017-01-25得票数 7
回答已采纳
<--it shows data.source error-->
import React, { Component } from "react";
import { AppRegistry, StyleSheet, View, Platform, Picker, ActivityIndicator, Button, Alert} from "react-native";
export default class Project extends Component {
constructor(props)
浏览 0提问于2018-08-03得票数 0
下面是我的抓取代码： return fetch('https://172.16.57.200:8080/cebip/financeProductList',{
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((respons
浏览 31提问于2020-01-10得票数 3
我在上学习了react-native教程，并在添加了函数之后
fetchData: function() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
movies: responseData.movies,
});
})
.done();
},
添加到AwesomeProject对象，然后重新加载iOS模拟器，我得到了错误JSON Parse error
浏览 0提问于2015-06-08得票数 3
伙计们，我对事件onPress有问题！如果我更改TextInput值函数_find()工作，但单击按钮事件无效。控制台中的错误：“警告:失败的道具类型:螺旋桨onPress在Button中被标记为必需，但它的值是undefined。”
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View,StyleSheet,Button } from 'react-native';
export default class inputText exte
浏览 0提问于2018-05-29得票数 0
回答已采纳
1回答
我在android上遇到了一个反应本地应用的问题，
应用程序是使用世博开发的。
应用程序在iOS设备和iOS模拟器上运行良好
运行在android模拟器上的在启动时发出警告.
可能未处理的拒绝承诺(id: 0)：
TypeError:网络请求失败
仿真器的误差图像附后。
对fetch的任何后续调用都挂起以下错误
未处理的承诺拒绝: TypeError:网络请求失败
node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_node_modules/react-native/Libraries/Core/T
浏览 6提问于2020-12-14得票数 0
您好，只要学习使用js和react-native即可。我不能使用FormData，它总是显示不支持的bodyinit类型。我想发送文本而不是JSON.stringify。有谁可以帮我？谢谢!
var data = new FormData()
data.append('haha', 'input')
fetch('http://www.mywebsite.com/search.php', {
method: 'post',
body: data
})
.then((response) => response.js
浏览 3提问于2015-09-07得票数 41
fetch('https://mylocalip:5000/api/token')
.then(function (response) {
console.log('response : ',response)
return response.json();
}).then (function (response) {
this.setState({
token: response.token
});
}).catch(function (error) {
console.log(e
浏览 0提问于2018-05-24得票数 0
我在亚马逊网络服务的EC2上运行后端服务器，当我尝试使用fetch发出请求时，它只是提示网络请求失败。今晚我已经尝试了十亿次，我甚至买了一个域名并设置了ssl，因为这里的其他问题指出了这是问题所在，尽管那不起作用。Fetch在本地完全正常工作，但是指向我在AWS上的服务器就不行了，如果我记录了我要获取的URL并将其粘贴到我的浏览器中，它就会正常工作。 Network request failed
- node_modules\whatwg-fetch\dist\fetch.umd.js:474:29 in xhr.onerror
- node_modules\event-target-shi
浏览 66提问于2020-07-26得票数 1
回答已采纳
我正在尝试将TextInput的值发送给console.log中的另一个类函数。我的方法是，当按钮被按下时，TextInput中的值FromStr将被传递给另一个类函数。这是我的代码 import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import receiveMessage from "./receiveMessage"
export default class
浏览 26提问于2020-01-29得票数 0
2回答
有没有办法像Zend一样，在joomla中发生错误时调度事件并调用方法？我想在日志文件中记录这些错误。我想使用一个单一的方法来捕获每个错误。有可能吗？
除了JError之外，有没有其他方法可以做到这一点，请建议。
浏览 1提问于2014-03-04得票数 4
我尝试为我的应用程序创建一个网络可用性组件。我在network.js中的生命周期组件 import { Component } from 'react';
import { NetInfo } from 'react-native';
export default class Network extends Component {
constructor(props) {
super(props);
this.state = { connected: null }
}
componentWillMount() {
浏览 16提问于2019-02-06得票数 1
我正在做一个react原生项目，其中我试图检索一个json对象数组。我目前使用的fetch函数如下：
//******************* require in root App.js ***********
global.fetch = require('isomorphic-fetch');
//******************* API.js *************************
import fetch from 'isomorphic-fetch';
const api = {
getData()
浏览 2提问于2018-11-09得票数 0
尝试在react本机中使用fetch并获取 Unable to symbolicate stack trace: Requiring module "node_modules\react-native\Libraries\Network\fetch.js", which threw an exception: TypeError: Attempted to assign to readonly property.
Unable to symbolicate stack trace: undefined is not an object (evaluating '_$
浏览 105提问于2020-03-26得票数 1
回答已采纳
2回答
我是新来的React-Native
我有fetch，通过它我可以得到一些数据。我想要做的是在请求结束并且数据准备好之后，调用另一个函数或更新状态。这是我的代码。
getProducts()
{
return fetch(prodUrl, {method: "GET"})
.then((response) => response.json())
.then((responseData) => {
this.setState({brandList: responseD
浏览 16提问于2017-02-27得票数 0
回答已采纳
我在react-native中有一个状态变量( wallsJSON )，它应该保存从URL返回的数据
因此，在我的构造函数/getInitialState中，我将变量设置如下
{
wallsJSON : []
}
我使用以下函数来获取json数据
fetchWallsJSON() {
var url = 'http://unsplash.it/list';
fetch(url)
.then( response => response.json())
.then( jsonData => {
this.s
浏览 2提问于2015-12-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
