Question

我正在使用Firebase和Redux更新数组并将其显示在平面列表中。正在componentWillMount()中进行提取调用，我可以看到数据已正确提取。但是，在_myTestRender方法中查找时，this.props.test中的每个项目都会被调用两次。

样本数据：

[{'name':'test1', stuff: [{'key':'Bob'},{'key':'Alice'}]}]

渲染：

console.log('RENDER');
return (
  <View style={{flex: 1}}>
    <View style={styles.container}>
      <FlatList
        keyExtractor={this._keyExtractor}
        data={this.props.test}
        renderItem={({item}) => this._myTestRender(item)} />
      <Button title="log props" onPress={this._logProps} />
    </View>
  </View>
 )
}

_keyExtractor

_keyExtractor = (item, index) => item.name;

_myTestRender

console.log('this')
console.log(item.stuff);
return (
  <Text>{item.name}</Text>
)

除了对每个项目都调用_myTestRender两次之外，这种方法都可以正常工作。在我的示例设置中，我希望它调用_myTestRender两次，而不是4次。尽管如此，我仍然只看到两个元素出现在屏幕上。

示例控制台日志：

RENDER
Test.js:115 this
Test.js:116 (2) [{…}, {…}]
Test.js:115 this
Test.js:116 (2) [{…}, {…}]
Test.js:115 this
Test.js:116 (2) [{…}, {…}]
Test.js:115 this
Test.js:116 (2) [{…}, {…}]

任何建议都将不胜感激。

React Native FlatList在renderItem中复制数据

0 个答案: