React Native Endless Loop

Question

我正在使用react-native IOSTabbar，如下例所示：

  render: function() {
     return (
       <TabBarIOS
         tintColor="white"
         barTintColor="#D7DF01">
         <TabBarIOS.Item
           title="All"
           icon={require('./x.png')}
           selected={this.state.selectedTab === 'x'}
           onPress={() => {
             this.setState({
               selectedTab: 'x',
             });
           }}>
           {this._renderContent(this.state.selectedTab)}
         </TabBarIOS.Item>
         <TabBarIOS.Item
           icon={require('./y.png')}
           title="Incoming"
           selected={this.state.selectedTab === 'y'}
           onPress={() => {
             this.setState({
               selectedTab: 'y'
             });
           }}>
           {this._renderContent(this.state.selectedTab)}
         </TabBarIOS.Item>
         <TabBarIOS.Item
           icon={require('./z.png')}
           title="Outgoing"
           selected={this.state.selectedTab === 'z'}
           onPress={() => {
             this.setState({
               selectedTab: 'z'
             });
           }}>
            {this._renderContent(this.state.selectedTab)}
         </TabBarIOS.Item>
       </TabBarIOS>
     );
   },

在_renderContent方法中，我正在执行一个SQLLite Select，但这会以无限循环结束。这对TabBar来说是正常的吗？有人可以帮忙吗？

Answer 1

不要将SQLLite调用放在渲染中。使用生命周期方法，因为每次组件呈现它时都会：

• 拨打电话
• 更新某些州
• 触发另一个渲染

等等。

为什么不尝试将调用放入componentDidMount方法中，将结果分配给setState({ tab1Content: sqliteResult })之类的状态，然后使用tab1Content状态调用_renderContent