Question

运行App PutainDeBiere（http://putaindecode.io/fr/articles/js/react/native/introduction/）时在Android模拟器上，我收到此错误：

TypeError：undefined不是对象（评估＆＃39; this.text＆＃39;）

in .. \ node_modules \ whatwg-fetch \ fetch.js：296：18 执行这个：

this.json = function() {
  return this.text().then(JSON.parse)
}

我在Android模拟器上使用此示例：

index.js ---＆gt;

import React, { Component } from "react";
import { AppRegistry, 
    StyleSheet, 
    ActivityIndicator, // import des composants
    TouchableOpacity,
    Text, 
    View 
    } from "react-native";

import { getRandomBrewdog } from './app'

class App extends Component {

constructor(props) {
super(props)

// la state de notre composant est utilisé pour
// stocker quelques infos renvoyées par l'API
this.state = {
  name: '', // nom de la bière
  description: '', // sa description
  isLoading: false // la requête API est-elle en cours ?
}
}

// nous externalisons cette fonction afin de
// pouvoir l'appeler lorsqu'on le souhaite
_getRandomBrewdogWithFeedback = () => {
this.setState({ isLoading: true })

getRandomBrewdog()
  .then(json => this.setState({
    name: json.name,
    description: json.description,
    isLoading: false // la requête est terminée
  }))
  .catch(error => console.error(error))
}

componentWillMount() {
this._getRandomBrewdogWithFeedback()
}


render() {
const content = this.state.isLoading
  ? <ActivityIndicator /> // si requête en cours, on affiche un spinner
  : <View style={styles.infosContainer}>
      <Text style={styles.name}>
        {this.state.name} // sinon on affiche le nom de la bière
      </Text>

      <Text style={styles.description}>
        {this.state.description} // sa description
      </Text>

      <TouchableOpacity // on ajoute un "bouton" qui requête une autre bière  aléatoire
        onPress={this._getRandomBrewdogWithFeedback}
        style={styles.button}
      >
        <Text>Grab a new beer!</Text>
      </TouchableOpacity>
    </View>

return (
  <View style={styles.container}>
    {content}
  </View>
)
}


}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
// ajout de styles divers
infosContainer: {
margin: 30,
},
name: {
fontSize: 18,
fontWeight: '700',
marginBottom: 10,
},
description: {
marginBottom: 10,
},
button: {
borderWidth: 1,
borderColor: '#000',
borderRadius: 3,
padding: 5,
justifyContent: 'center',
alignItems: 'center',
}
})

---＆GT; app.js

import base64 from "base-64"; // importez la dépendance tout juste installée

const rootEndpoint = "https://api.punkapi.com/v2";
// pour simplifier la compréhension de ce tuto, nous renseignons la clé   API "en dur"
// ne faites jamais cela au sein de vos projets (voir   http://12factor.net/fr/config)
const punkApiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const password = ""; // la punk API n'utilise aucun mot de passe
const authBase64 = base64.encode(`${punkApiKey}:${password}`);

const headers = {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Basic ${authBase64}` // HTTP basic auth
};

// retourne une recette de bière au hasard
export const getRandomBrewdog = () =>
fetch(`${rootEndpoint}/beers/random`, { headers }).then(
({ status, json }) => {
  if (status !== 200)
    throw new Error(`API answered with status code ${status}`); // gestion du status code HTTP
  else return json(); // on parse la réponse en JSON
}
);

- ＆GT; fetch.js

(function(self) {
'use strict';

if (self.fetch) {
return
}

var support = {
searchParams: 'URLSearchParams' in self,
iterable: 'Symbol' in self && 'iterator' in Symbol,
blob: 'FileReader' in self && 'Blob' in self && (function() {
  try {
    new Blob()
    return true
  } catch(e) {
    return false
  }
})(),
formData: 'FormData' in self,
arrayBuffer: 'ArrayBuffer' in self
}

if (support.arrayBuffer) {
var viewClasses = [
  '[object Int8Array]',
  '[object Uint8Array]',
  '[object Uint8ClampedArray]',
  '[object Int16Array]',
  '[object Uint16Array]',
  '[object Int32Array]',
  '[object Uint32Array]',
  '[object Float32Array]',
  '[object Float64Array]'
]

var isDataView = function(obj) {
  return obj && DataView.prototype.isPrototypeOf(obj)
}

var isArrayBufferView = ArrayBuffer.isView || function(obj) {
  return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1
}
}

function normalizeName(name) {
if (typeof name !== 'string') {
  name = String(name)
}
if (/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(name)) {
  throw new TypeError('Invalid character in header field name')
}
return name.toLowerCase()
}

function normalizeValue(value) {
if (typeof value !== 'string') {
  value = String(value)
}
return value
}

// Build a destructive iterator for the value list
function iteratorFor(items) {
var iterator = {
  next: function() {
    var value = items.shift()
    return {done: value === undefined, value: value}
  }
}

if (support.iterable) {
  iterator[Symbol.iterator] = function() {
    return iterator
  }
}

return iterator
}

function Headers(headers) {
this.map = {}

if (headers instanceof Headers) {
  headers.forEach(function(value, name) {
    this.append(name, value)
  }, this)

} else if (headers) {
  Object.getOwnPropertyNames(headers).forEach(function(name) {
    this.append(name, headers[name])
  }, this)
}
}

Headers.prototype.append = function(name, value) {
name = normalizeName(name)
value = normalizeValue(value)
var list = this.map[name]
if (!list) {
  list = []
  this.map[name] = list
}
list.push(value)
}

Headers.prototype['delete'] = function(name) {
delete this.map[normalizeName(name)]
}

Headers.prototype.get = function(name) {
var values = this.map[normalizeName(name)]
return values ? values[0] : null
}

Headers.prototype.getAll = function(name) {
return this.map[normalizeName(name)] || []
}

Headers.prototype.has = function(name) {
return this.map.hasOwnProperty(normalizeName(name))
}

Headers.prototype.set = function(name, value) {
this.map[normalizeName(name)] = [normalizeValue(value)]
}

Headers.prototype.forEach = function(callback, thisArg) {
Object.getOwnPropertyNames(this.map).forEach(function(name) {
  this.map[name].forEach(function(value) {
    callback.call(thisArg, value, name, this)
  }, this)
}, this)
}

Headers.prototype.keys = function() {
var items = []
this.forEach(function(value, name) { items.push(name) })
return iteratorFor(items)
}

Headers.prototype.values = function() {
var items = []
this.forEach(function(value) { items.push(value) })
return iteratorFor(items)
}

Headers.prototype.entries = function() {
var items = []
this.forEach(function(value, name) { items.push([name, value]) })
return iteratorFor(items)
}

if (support.iterable) {
Headers.prototype[Symbol.iterator] = Headers.prototype.entries
}

function consumed(body) {
if (body.bodyUsed) {
  return Promise.reject(new TypeError('Already read'))
}
body.bodyUsed = true
}

function fileReaderReady(reader) {
return new Promise(function(resolve, reject) {
  reader.onload = function() {
    resolve(reader.result)
  }
  reader.onerror = function() {
    reject(reader.error)
  }
})
}

function readBlobAsArrayBuffer(blob) {
var reader = new FileReader()
var promise = fileReaderReady(reader)
reader.readAsArrayBuffer(blob)
return promise
}

function readBlobAsText(blob) {
var reader = new FileReader()
var promise = fileReaderReady(reader)
reader.readAsText(blob)
return promise
}

function readArrayBufferAsText(buf) {
var view = new Uint8Array(buf)
var chars = new Array(view.length)

for (var i = 0; i < view.length; i++) {
  chars[i] = String.fromCharCode(view[i])
}
return chars.join('')
}

function bufferClone(buf) {
if (buf.slice) {
  return buf.slice(0)
} else {
  var view = new Uint8Array(buf.byteLength)
  view.set(new Uint8Array(buf))
  return view.buffer
}
}

  function Body() {
  this.bodyUsed = false

  this._initBody = function(body) {
  this._bodyInit = body
  if (!body) {
    this._bodyText = ''
  } else if (typeof body === 'string') {
    this._bodyText = body
  } else if (support.blob && Blob.prototype.isPrototypeOf(body)) {
    this._bodyBlob = body
  } else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
    this._bodyFormData = body
  } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
    this._bodyText = body.toString()
  } else if (support.arrayBuffer && support.blob && isDataView(body)) {
    this._bodyArrayBuffer = bufferClone(body.buffer)
    // IE 10-11 can't handle a DataView body.
    this._bodyInit = new Blob([this._bodyArrayBuffer])
  } else if (support.arrayBuffer && (ArrayBuffer.prototype.isPrototypeOf  (body) || isArrayBufferView(body))) {
    this._bodyArrayBuffer = bufferClone(body)
  } else {
    throw new Error('unsupported BodyInit type')
  }

  if (!this.headers.get('content-type')) {
    if (typeof body === 'string') {
      this.headers.set('content-type', 'text/plain;charset=UTF-8')
    } else if (this._bodyBlob && this._bodyBlob.type) {
      this.headers.set('content-type', this._bodyBlob.type)
    } else if (support.searchParams &&   URLSearchParams.prototype.isPrototypeOf(body)) {
      this.headers.set('content-type', 'application/x-www-form-  urlencoded;charset=UTF-8')
    }
  }
}

if (support.blob) {
  this.blob = function() {
    var rejected = consumed(this)
    if (rejected) {
      return rejected
    }

    if (this._bodyBlob) {
      return Promise.resolve(this._bodyBlob)
    } else if (this._bodyArrayBuffer) {
      return Promise.resolve(new Blob([this._bodyArrayBuffer]))
    } else if (this._bodyFormData) {
      throw new Error('could not read FormData body as blob')
    } else {
      return Promise.resolve(new Blob([this._bodyText]))
    }
  }

  this.arrayBuffer = function() {
    if (this._bodyArrayBuffer) {
      return consumed(this) || Promise.resolve(this._bodyArrayBuffer)
    } else {
      return this.blob().then(readBlobAsArrayBuffer)
    }
  }
}

this.text = function() {
  var rejected = consumed(this)
  if (rejected) {
    return rejected
  }

  if (this._bodyBlob) {
    return readBlobAsText(this._bodyBlob)
  } else if (this._bodyArrayBuffer) {
    return Promise.resolve(readArrayBufferAsText(this._bodyArrayBuffer))
  } else if (this._bodyFormData) {
    throw new Error('could not read FormData body as text')
  } else {
    return Promise.resolve(this._bodyText)
  }
}

if (support.formData) {
  this.formData = function() {
    return this.text().then(decode)
  }
}

this.json = function() {
  return this.text().then(JSON.parse)
}

return this
}

// HTTP methods whose capitalization should be normalized
var methods = ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'POST', 'PUT']

function normalizeMethod(method) {
var upcased = method.toUpperCase()
return (methods.indexOf(upcased) > -1) ? upcased : method
}

function Request(input, options) {
options = options || {}
var body = options.body

if (typeof input === 'string') {
  this.url = input
} else {
  if (input.bodyUsed) {
    throw new TypeError('Already read')
  }
  this.url = input.url
  this.credentials = input.credentials
  if (!options.headers) {
    this.headers = new Headers(input.headers)
  }
  this.method = input.method
  this.mode = input.mode
  if (!body && input._bodyInit != null) {
    body = input._bodyInit
    input.bodyUsed = true
  }
}

this.credentials = options.credentials || this.credentials || 'omit'
if (options.headers || !this.headers) {
  this.headers = new Headers(options.headers)
}
this.method = normalizeMethod(options.method || this.method || 'GET')
this.mode = options.mode || this.mode || null
this.referrer = null

if ((this.method === 'GET' || this.method === 'HEAD') && body) {
  throw new TypeError('Body not allowed for GET or HEAD requests')
}
this._initBody(body)
}

Request.prototype.clone = function() {
return new Request(this, { body: this._bodyInit })
}

function decode(body) {
var form = new FormData()
body.trim().split('&').forEach(function(bytes) {
  if (bytes) {
    var split = bytes.split('=')
    var name = split.shift().replace(/\+/g, ' ')
    var value = split.join('=').replace(/\+/g, ' ')
    form.append(decodeURIComponent(name), decodeURIComponent(value))
  }
})
return form
}

function parseHeaders(rawHeaders) {
var headers = new Headers()
rawHeaders.split('\r\n').forEach(function(line) {
  var parts = line.split(':')
  var key = parts.shift().trim()
  if (key) {
    var value = parts.join(':').trim()
    headers.append(key, value)
  }
})
return headers
}

Body.call(Request.prototype)

function Response(bodyInit, options) {
if (!options) {
  options = {}
}

this.type = 'default'
this.status = 'status' in options ? options.status : 200
this.ok = this.status >= 200 && this.status < 300
this.statusText = 'statusText' in options ? options.statusText : 'OK'
this.headers = new Headers(options.headers)
this.url = options.url || ''
this._initBody(bodyInit)
}

Body.call(Response.prototype)

Response.prototype.clone = function() {
return new Response(this._bodyInit, {
  status: this.status,
  statusText: this.statusText,
  headers: new Headers(this.headers),
  url: this.url
})
}

Response.error = function() {
var response = new Response(null, {status: 0, statusText: ''})
response.type = 'error'
return response
}

var redirectStatuses = [301, 302, 303, 307, 308]

Response.redirect = function(url, status) {
if (redirectStatuses.indexOf(status) === -1) {
  throw new RangeError('Invalid status code')
}

return new Response(null, {status: status, headers: {location: url}})
}

self.Headers = Headers
self.Request = Request
self.Response = Response

self.fetch = function(input, init) {
return new Promise(function(resolve, reject) {
  var request = new Request(input, init)
  var xhr = new XMLHttpRequest()

  xhr.onload = function() {
    var options = {
      status: xhr.status,
      statusText: xhr.statusText,
      headers: parseHeaders(xhr.getAllResponseHeaders() || '')
    }
    options.url = 'responseURL' in xhr ? xhr.responseURL :    options.headers.get('X-Request-URL')
    var body = 'response' in xhr ? xhr.response : xhr.responseText
    resolve(new Response(body, options))
  }

  xhr.onerror = function() {
    reject(new TypeError('Network request failed'))
  }

  xhr.ontimeout = function() {
    reject(new TypeError('Network request failed'))
  }

  xhr.open(request.method, request.url, true)

  if (request.credentials === 'include') {
    xhr.withCredentials = true
  }

  if ('responseType' in xhr && support.blob) {
    xhr.responseType = 'blob'
  }

  request.headers.forEach(function(value, name) {
    xhr.setRequestHeader(name, value)
  })

  xhr.send(typeof request._bodyInit === 'undefined' ? null :  request._bodyInit)
})
}
self.fetch.polyfill = true
})(typeof self !== 'undefined' ? self : this);

Answer 1

尝试bindind函数：

constructor(props) {
  super(props)

  this.state = {
    name: '', 
    description: '',
    isLoading: false
  }

  this._getRandomBrewdogWithFeedback  = this._getRandomBrewdogWithFeedback.bind(this);
}

_getRandomBrewdogWithFeedback () {
  //this.setState({ isLoading: true }); 
  // You cannot be sure here that these two lines of code will be executed
  // in the order you think since setState is an async method.
  // I guess what you should do is to pass a callback to setState with the code below

  this.setState({ isLoading: true }, () => {
    //This is the only way to ensure that state has changed
    //before calling the API
    getRandomBrewdog()
      .then(json => this.setState({
        name: json.name,
        description: json.description,
        isLoading: false // la requête est terminée
      }))
      .catch(error => console.error(error))
  })
}

componentWillMount() {
  this._getRandomBrewdogWithFeedback();
}

如果你不绑定该函数，当你在_getRandomBrewdogWithFeedback中调用 this 时，你并没有真正引用该组件。实际上，您可以通过调试来检查它。

让我知道它是否有效，如果没有，请在代码中指出错误的确切位置。

有关绑定的更多信息，请查看here

注意：我还在setState中添加了与您如何使用componentDidMount相关的评论。注意这一点，认识到那种不端行为可能会很痛苦

注2：我正在使用不同的获取功能，这样：

fetch(...)
  .then((response) => {
    if (response.ok) {
      return response.json()
        .then((responseData) => {
          return responseData;
        });
    }

    return response.json().
      then((error) => {
        console.log(error);
        return Promise.reject(error);
      });
  })

**注意：**您正在使用getRandomBrewdog，就好像它正在返回一个承诺，但事实并非如此。

更改函数的定义应解决问题：

getRandomBrewdog = () => {
  return fetch.then(...)
}

答案：

json流是一个标签，在v1中它不是 - ＆gt;

它适用于此代码 - ＆gt;响应[0]，它不适用于响应或json（）或response.json（）：

  export const getRandomBrewdog = () => 
   fetch(${rootEndpoint}/beers/random, {headers})
    .then(function(response) 
    {if(response.status == 200) 
     return   response.json(); 
    else throw new Error('Something went wrong on api server!'); })
    .then (function(response) { 
     return response[0]; }) 
   .catch(function(error) { console.error (error); });

TypeError：undefined不是对象（评估＆＃39; this.text＆＃39;）

1 个答案: