任务在 react-native 中因请求而成为孤儿——这是什么意思？答案

【问题标题】：Task orphaned for request in react-native – what does it mean?任务在 react-native 中因请求而成为孤儿——这是什么意思？
【发布时间】：2017-01-13 15:58:42
【问题描述】：

我正在尝试为带有按钮和其他操作的图块构建网格系统。我分叉尝试了 react native Playground 网格图像源，你可以找到 here。将zIndex 添加到单个图片时会产生以下“堆栈跟踪”和错误。图像永远不会被描绘出来。

如果您有兴趣，这是我正在使用的确切组件：

export default class GridLayout extends Component {
  constructor () {
    super()
    const { width, height } = Dimensions.get('window')
    this.state = {
      currentScreenWidth: width,
      currentScreenHeight: height
    }
  }

  handleRotation (event) {
    var layout = event.nativeEvent.layout
    this.setState({ currentScreenWidth: layout.width, currentScreenHeight: layout.height })
  }

  calculatedSize () {
    var size = this.state.currentScreenWidth / IMAGES_PER_ROW
    return { width: size, height: size }
  }

  renderRow (images) {
    return images.map((uri, i) => {
      return (
        <Image key={i} style={[styles.image, this.calculatedSize()]} source={{uri: uri}} />
      )
    })
  }

  renderImagesInGroupsOf (count) {
    return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow) => {
      console.log('row being painted')
      return (
        <View key={uuid.v4()} style={styles.row}>
          {this.renderRow(imagesForRow)}
        </View>
      )
    })
  }

  render () {
    return (
      <ScrollView style={styles.grid} onLayout={(ev) => this.handleRotation(ev)} contentContainerStyle={styles.scrollView}>
        {this.renderImagesInGroupsOf(IMAGES_PER_ROW)}
      </ScrollView>
    )
  }
}

var styles = StyleSheet.create({

  grid: {
    flex: 1,
    backgroundColor: 'blue'
  },

  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    backgroundColor: 'magenta'
  },

  image: {
    zIndex: 2000
  }
})

【问题讨论】：

很多人都遇到了同样的问题。似乎是一个RN错误。 github.com/facebook/react-native/issues/12152 github.com/facebook/react-native/issues/10731

标签： javascript reactjs react-native

【解决方案1】：

这可能与您的渲染方式有关。您的请求似乎卡住了。看起来这是在 RN 中引发错误的代码（来自 RCTImageLoader.m）：

// Remove completed tasks
for (RCTNetworkTask *task in _pendingTasks.reverseObjectEnumerator) {
  switch (task.status) {
    case RCTNetworkTaskFinished:
      [_pendingTasks removeObject:task];
      _activeTasks--;
      break;
    case RCTNetworkTaskPending:
      break;
    case RCTNetworkTaskInProgress:
      // Check task isn't "stuck"
      if (task.requestToken == nil) {
        RCTLogWarn(@"Task orphaned for request %@", task.request);
        [_pendingTasks removeObject:task];
        _activeTasks--;
        [task cancel];
      }
      break;
  }
}

我不完全确定如何解决这个问题，但有几个想法可以帮助您调试：

<Image> 组件具有一些函数和回调，您可以利用这些函数和回调来尝试进一步追踪问题（onLoad、onLoadEnd、onLoadStart、onError、onProgress）。最后两个仅适用于 iOS，但您可以查看是否调用了其中的任何一个以查看进程中的哪些地方挂断了。

【讨论】：

删除图像元素确实使应用程序工作，所以它肯定有事可做。不幸的是，我现在无法重现该错误。在释放赏金之前，我会稍等片刻，以便其他人可以尝试。
我遇到了同样的错误，可能是 react-native 中的错误？

【解决方案2】：

我认为这个问题可能与您尝试在 ios 中加载 http 图像有关。在我的 ios（android 不关心）上的种子数据中使用伪造图像时，我的项目中也出现了同样的错误，这些图像只返回 http。这是我在这个主题上找到的更好的解释React-native loading image over https works while http does not work

【讨论】：

【解决方案3】：

根据 react native，最好让 item 组件成为纯组件，并且组件中要渲染的所有数据都应该在 item 对象本身中以获得更好的性能。在图像的情况下，我也不知道他们是如何处理它的。从 url 加载图像可能不在项目对象本身中。但是，我也遇到了这个问题，我正在调用一个函数来加载一个包含应用程序的图像图标。

【讨论】：