如何将值从React Native功能组件返回到父级

时间:2018-05-02 17:52:15

标签: react-native fetch

对于此功能组件,如何将值返回到调用该函数的另一个组件?

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Error><Code>InvalidDigest</Code><Message>The Content-MD5 you specified was an invalid.</Message><Resource>/ghhsa-bucket-etl-dev/</Resource><RequestId>aed25243-22a1-477d-9ab8-b87780625a61</RequestId><httpStatusCode>400</httpStatusCode></Error>

当我尝试在另一个函数中获取值时,它是未定义的:

/**
 * A custom fetch wrapper.
 */

import Config from '../config'

const _Fetch = (context: Object, endpoint: string, init: Object, key?: string) => {

  var k = (typeof key !== 'undefined') ? key : 'data';

  return fetch(Config.base+endpoint, init)
  .then(response => {

    if (response.ok) {
      response.text().then((text) => {

        var obj = tryParseJSON(text)

        if (obj) {
          // For jsonapi.
          if (obj.data) {
            obj = obj.data
          }

          var s = {
            data: Object
          }
          s[k] = obj

          context.setState(s)

          return s // This value exists here, but how can I return it to the _Fetch caller?
        }

      })
      .catch((error) => {
        console.error(error)
      })
    }
  })

  function tryParseJSON(jsonString) { 
    try {
      var o = JSON.parse(jsonString)
      if (o && typeof o === "object") {
          return o
      }
    }
    catch (e) { 
      console.log(e)
    }
    return false
  }

}

export default _Fetch

类似的问题在我的案例中没有多大帮助:

1 个答案:

答案 0 :(得分:1)

解决此问题的正确方法是使用Redux或其他一些商店经理。如果您使用的是redux,则可以使用新值更新存储,并且所有组件都可以使用它。这样,您的父母可以直接访问它。

获取操作是异步的,它不能直接将数据返回给调用方法。 如果您不想使用redux,那么非常标准的JavaScript解决方案将使用回调。 您可以将回调方法传递给fetch函数。在您的代码中,您可以使用callback方法替换return s。 例如将return s替换为callback(s)